Używasz wyrażenia regularnego w CSS?

Mam stronę HTML z elementami div, które mają identyfikator (y) w postaci s1 , s2 i tak dalej.

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

Chcę zastosować właściwość css do podzbioru tych sekcji / elementów div (w zależności od identyfikatora). Jednak za każdym razem, gdy dodam element div , muszę osobno dodać css dla sekcji, tak jak to.

//css
#s1{
...
}

Czy jest coś takiego jak wyrażenia regularne w css, których mogę użyć do nadania stylu zestawowi elementów div .

Możesz zarządzać wybieraniem tych elementów bez jakiejkolwiek formy wyrażenia regularnego, jak pokazują poprzednie odpowiedzi, ale aby odpowiedzieć bezpośrednio na pytanie, tak, możesz użyć formy wyrażenia regularnego w selektorach:

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

Oznacza to, że wybierz wszystkie elementy div wewnątrz elementu div #sections, które mają identyfikator zaczynający się na literę „s”.

Zobacz skrzypce tutaj .

Dokumentacja selektora W3 CSS tutaj .

Jako uzupełnienie tej odpowiedzi możesz użyć, $aby uzyskać dopasowania końcowe i *uzyskać dopasowania w dowolnym miejscu w nazwie wartości.

Pasuje wszędzie: .col-md, .left-col, .col, .tricolor, itd.

[class*="col"]

Mecze na początku: .col-md, .col-sm-6, itd.

[class^="col-"]

Mecze na zakończenie: .left-col, .right-col, itd.

[class$="-col"]

Identyfikator służy do jednoznacznej identyfikacji elementu . Wszelkie zastosowane do niego style również powinny być unikalne dla tego elementu. Jeśli masz style, które chcesz zastosować do wielu elementów, powinieneś dodać do nich klasę, zamiast polegać na selektorach ID ...

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

i

.sec {
    ...
}

Lub w twoim konkretnym przypadku możesz wybrać wszystkie podziały w kontenerze nadrzędnym, jeśli nic innego nie jest w nim, na przykład:

#sections > div {
    ...
}

Przede wszystkim istnieje wiele, wiele sposobów dopasowywania elementów w dokumencie HTML. Zacznij od tego odniesienia, aby zobaczyć niektóre z dostępnych selektorów / wzorców, których możesz użyć do zastosowania reguły stylu do elementu (elementów).

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

Dopasuj wszystkie elementy, divktóre są bezpośrednimi potomkami #main.

#main > div

Dopasuj wszystkie divs, które są bezpośrednimi lub pośrednimi potomkami #main.

#main div

Dopasuj pierwszy, divktóry jest bezpośrednim potomkiem #sections.

#main > div:first-child

Dopasuj a divz określonym atrybutem.

#main > div[foo="bar"]

Możesz po prostu dodać klasę do każdego ze swoich DIV i zastosować regułę do klasy w ten sposób:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

Zwykle używam, *gdy chcę uzyskać wszystkie ciągi zawierające poszukiwane znaki.

* użyte w wyrażeniu regularnym, zastępuje wszystkie znaki.

Użyty w SASS lub CSS byłby podobny [id*="s"]i dostałby wszystkie elementy DOM z id "s ......".

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

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

Wypróbuj moje ogólne wyrażenie regularne CSS

(([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

jest też inny prosty sposób na wybranie poszczególnych elementów w css ...

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

jeśli masz tylko kilka elementów do wyboru i nie chcesz zawracać sobie głowy klasami, to też się sprawdzi.