Css'de normal ifade mi kullanıyorsunuz?

S1 , s2 ve benzeri biçimlerde id (ler) i olan div'lere sahip bir html sayfam var .

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

Bu bölümlerin / div'lerin bir alt kümesine bir css özelliği uygulamak istiyorum (kimliğe bağlı olarak). Ancak, her div ekleyişimde, bölüm için css'yi bu şekilde ayrı ayrı eklemem gerekiyor.

//css
#s1{
...
}

Ben bir dizi stil uygulamak için kullanabileceği css düzenli ifadeler gibi orada şey mi bölümlerde; .

Önceki yanıtların gösterdiği gibi herhangi bir normal ifade biçimi olmadan bu öğeleri seçmeyi yönetebilirsiniz, ancak soruyu doğrudan yanıtlamak için, evet, seçicilerde bir normal ifade biçimi kullanabilirsiniz:

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

Bu, #sections div içinde 's' harfiyle başlayan bir kimliği olan herhangi bir div öğesinin seçildiğini söylüyor.

Burada keman görün .

W3 CSS seçici belgeleri burada .

Bu cevabın bir tamamlayıcısı olarak $, son eşleşmeleri *elde etmek ve değer adının herhangi bir yerinde eşleşmeleri elde etmek için kullanabilirsiniz .

Maçlar her yerde: .col-md, .left-col, .col, .tricolor, vb

[class*="col"]

Başında Maçlar: .col-md, .col-sm-6vb

[class^="col-"]

Biten de Maçlar: .left-col, .right-colvb

[class$="-col"]

Bir kimlik, öğeyi benzersiz şekilde tanımlamak içindir . Buna uygulanan stillerin de o öğeye özgü olması gerekir. Birçok öğeye uygulamak istediğiniz stilleriniz varsa , kimlik seçicilere güvenmek yerine hepsine bir sınıf eklemelisiniz ...

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

ve

.sec {
    ...
}

Veya özel durumunuzda, içinde başka hiçbir şey yoksa, ana kapsayıcınızın içindeki tüm bölümleri seçebilirsiniz, örneğin:

#sections > div {
    ...
}

Her şeyden önce, bir HTML belgesindeki öğeleri eşleştirmenin birçok yolu vardır. Bir öğeye / öğelere stil kuralı uygulamak için kullanabileceğiniz mevcut seçicilerden / kalıplardan bazılarını görmek için bu referansla başlayın.

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

Tüm eşleştir divdoğrudan torunları s #main.

#main > div

divDoğrudan veya dolaylı soyundan gelen tüm URL'leri eşleştirin #main.

#main div

İlk Maç divdoğrudan soyundan olan #sections.

#main > div:first-child

A'yı divbelirli bir öznitelikle eşleştirin.

#main > div[foo="bar"]

DIV'lerinizin her birine bir sınıf ekleyebilir ve kuralı şu şekilde sınıfa uygulayabilirsiniz:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

*İstenilen karakterleri içeren tüm dizeleri almak istediğimde genellikle kullanırım .

* regex'te kullanılır, tüm karakterlerin yerini alır.

SASS veya CSS'de kullanıldığında buna benzer bir şey olur [id*="s"]ve "s ......" kimliğine sahip tüm DOM öğelerini alır.

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

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

Genel CSS normal ifademi dene

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

css'de de belirli öğeleri seçmenin başka bir basit yolu var ...

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

Seçebileceğiniz yalnızca birkaç öğeniz varsa ve sınıflarla uğraşmak istemiyorsanız, bu da kolayca çalışacaktır.