Sử dụng biểu thức chính quy trong css?

Tôi có một trang html với các div có id (s) có dạng s1 , s2 , v.v.

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

Tôi muốn áp dụng một thuộc tính css cho một tập hợp con của các phần / div này (tùy thuộc vào id). Tuy nhiên, mỗi lần tôi thêm div , tôi phải thêm css cho phần riêng biệt như thế này.

//css
#s1{
...
}

Có một cái gì đó giống như các biểu thức thông thường trong css mà tôi có thể sử dụng để áp dụng kiểu cho một tập hợp các div .

Bạn có thể quản lý việc chọn các thành phần đó mà không cần bất kỳ hình thức regex nào như các câu trả lời trước đó hiển thị, nhưng để trả lời trực tiếp câu hỏi, có, bạn có thể sử dụng một hình thức regex trong bộ chọn:

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

Điều đó nói rằng hãy chọn bất kỳ phần tử div nào bên trong div #sections có ID bắt đầu bằng chữ cái 's'.

Xem fiddle ở đây .

Tài liệu chọn CSS W3 ở đây .

Để bổ sung cho câu trả lời này, bạn có thể sử dụng $để có được kết quả khớp và *để có được kết quả khớp ở bất kỳ đâu trong tên giá trị.

Phù hợp với bất cứ nơi nào: .col-md, .left-col, .col, .tricolor,, vv

[class*="col"]

Phù hợp ngay từ đầu: .col-md, .col-sm-6vv

[class^="col-"]

Phù hợp với kết thúc: .left-col, .right-colvv

[class$="-col"]

Một ID có nghĩa là để xác định các yếu tố duy nhất . Bất kỳ phong cách nào được áp dụng cho nó cũng phải là duy nhất cho yếu tố đó. Nếu bạn có kiểu bạn muốn áp dụng cho nhiều thành phần, bạn nên thêm một lớp cho tất cả chúng, thay vì dựa vào bộ chọn ID ...

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

và

.sec {
    ...
}

Hoặc trong trường hợp cụ thể của bạn, bạn có thể chọn tất cả các bộ phận bên trong thùng chứa cha mẹ của mình, nếu không có gì khác bên trong nó, như vậy:

#sections > div {
    ...
}

Trước hết, có rất nhiều cách kết hợp các mục trong tài liệu HTML. Bắt đầu với tham chiếu này để xem một số bộ chọn / mẫu có sẵn mà bạn có thể sử dụng để áp dụng quy tắc kiểu cho (các) phần tử.

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

Phù hợp với tất cả divcác con cháu trực tiếp của #main.

#main > div

Phù hợp với tất cả divcác hậu duệ trực tiếp hoặc gián tiếp của #main.

#main div

Phù hợp với người đầu tiên divlà hậu duệ trực tiếp của #sections.

#main > div:first-child

Nối a divvới một thuộc tính cụ thể.

#main > div[foo="bar"]

Bạn có thể 'chỉ cần thêm một lớp cho mỗi DIV của mình và áp dụng quy tắc cho lớp theo cách này:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

Tôi thường sử dụng *khi tôi muốn có được tất cả các chuỗi có chứa các ký tự mong muốn.

* được sử dụng trong regex, thay thế tất cả các ký tự.

Được sử dụng trong SASS hoặc CSS sẽ là một cái gì đó giống như [id*="s"]và nó sẽ nhận được tất cả các thành phần DOM với id "s ......".

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

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

Hãy thử biểu thức chính quy CSS chung của tôi

(([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}(?=.*-))

Bản demo https://regexr.com/4a22i

có một cách đơn giản khác để chọn các yếu tố cụ thể trong css nữa ...

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

nếu bạn chỉ có một vài yếu tố để lựa chọn và không muốn bận tâm đến các lớp học, thì điều này cũng sẽ hoạt động dễ dàng.