Verwenden Sie reguläre Ausdrücke in CSS?

Ich habe eine HTML-Seite mit Divs, die IDs der Form s1 , s2 usw. haben.

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

Ich möchte eine CSS-Eigenschaft auf eine Teilmenge dieser Abschnitte / Divs anwenden (abhängig von der ID). Jedes Mal, wenn ich ein div hinzufüge , muss ich das CSS für den Abschnitt separat wie folgt hinzufügen.

//css
#s1{
...
}

Gibt es so etwas wie reguläre Ausdrücke in css , dass ich Stil auf einen Satz anwenden kann divs .

Sie können die Auswahl dieser Elemente ohne jegliche Form von Regex verwalten, wie die vorherigen Antworten zeigen. Um die Frage jedoch direkt zu beantworten, können Sie eine Form von Regex in Selektoren verwenden:

#sections div[id^='s'] {
    color: red;  
}

Das heißt, wählen Sie alle div-Elemente in den #sections div aus, deren ID mit dem Buchstaben 's' beginnt.

Siehe Geige hier .

W3 CSS Selector-Dokumente hier .

Als Ergänzung zu dieser Antwort können Sie $die Endübereinstimmungen und *Übereinstimmungen an einer beliebigen Stelle im Wertnamen abrufen.

Spiele überall: .col-md, .left-col, .col, .tricolor, usw.

[class*="col"]

Spiele am Anfang: .col-md, .col-sm-6usw.

[class^="col-"]

Spiele am Ende: .left-col, .right-colusw.

[class$="-col"]

Eine ID soll das Element eindeutig identifizieren . Alle darauf angewendeten Stile sollten auch für dieses Element eindeutig sein. Wenn Sie Stile haben, die Sie auf viele Elemente anwenden möchten , sollten Sie allen eine Klasse hinzufügen, anstatt sich auf ID-Selektoren zu verlassen ...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

und

.sec {
    ...
}

In Ihrem speziellen Fall können Sie auch alle Abteilungen in Ihrem übergeordneten Container auswählen, wenn sich nichts anderes darin befindet:

#sections > div {
    ...
}

Erstens gibt es viele, viele Möglichkeiten, Elemente in einem HTML-Dokument abzugleichen. Beginnen Sie mit dieser Referenz, um einige der verfügbaren Selektoren / Muster anzuzeigen, mit denen Sie eine Stilregel auf ein oder mehrere Elemente anwenden können.

http://www.w3.org/TR/selectors/

Entspricht allen divs, die direkte Nachkommen von sind #main.

#main > div

Entspricht allen divs, die direkte oder indirekte Nachkommen von sind #main.

#main div

Passen Sie die erste an, divdie direkt von ihnen abstammt #sections.

#main > div:first-child

Ordnen Sie a diveinem bestimmten Attribut zu.

#main > div[foo="bar"]

Sie können einfach jedem Ihrer DIVs eine Klasse hinzufügen und die Regel folgendermaßen auf die Klasse anwenden:

HTML:

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS:

//css
.myclass
{
   ...
}

Ich benutze normalerweise, *wenn ich alle Zeichenfolgen erhalten möchte, die die gewünschten Zeichen enthalten.

* Wird in Regex verwendet und ersetzt alle Zeichen.

In SASS oder CSS verwendet würde so etwas wie [id*="s"]und es wird alle DOM-Elemente mit ID "s ......" erhalten.

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

Versuchen Sie meinen generischen regulären CSS-Ausdruck

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

Demo https://regexr.com/4a22i

Es gibt noch eine andere einfache Möglichkeit, bestimmte Elemente in CSS auszuwählen ...

#s1, #s2, #s3 {
    // set css attributes here
}

Wenn Sie nur ein paar Elemente zur Auswahl haben und sich nicht mit Klassen beschäftigen möchten, funktioniert dies auch problemlos.