Sử dụng cụm từ thông dụng trong css?

Question

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

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

Tôi muốn áp dụng thuộc tính css cho một tậ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ó cái gì đó như biểu thức thông thường trong css mà tôi có thể sử dụng để áp dụng phong cách cho một tập hợp các divs.

Answer 1

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

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

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

Xem fiddle here.

W3 CSS selector docs here.

Answer 2

Trước hết, có rất nhiều cách phù hợp với các mục trong tài liệu HTML. Phù hợp với ID nên được sử dụng một cách tiết kiệm.

Bắt đầu với tham chiếu này trước để 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) thành phần.

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

Hầu hết các bộ chọn sẽ làm việc với IE 9 và tất cả các trình duyệt hiện đại khác; các bộ chọn quan trọng hoạt động trong IE 8 (kết quả sẽ thay đổi IE 7 trở xuống).

Thứ hai, trừ khi bạn thực sự cần đặt tên mục một cách rõ ràng bằng ID, hãy cân nhắc sử dụng công cụ chọn phân cấp thay thế. Điều này làm cho mã sạch hơn nhiều.

Khớp tất cả DIV s là hậu duệ trực tiếp của #sections.

#sections > DIV 

Đối sánh tất cả DIV s là hậu duệ trực tiếp hoặc gián tiếp của #sections.

#sections DIV 

khớp với số DIV đầu tiên là hậu duệ trực tiếp của #sections.

#sections > DIV:first-child 

Khớp một DIV với thuộc tính cụ thể.

#sections > DIV[foo="bar"] 

Answer 3

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

HTML:

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

CSS:

//css 
.myclass 
{ 
    ... 
} 

Answer 4

ID là nhằm xác định phần tử duy nhất. Bất kỳ kiểu nào được áp dụng cho nó cũng phải là duy nhất cho phần 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 vào tất cả, 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 phụ huynh của bạn, nếu không có gì khác là bên trong nó, như vậy:

#sections > div { 
    ... 
} 

Answer 5

có một cách đơn giản để chọn các yếu tố đặc biệt trong css quá ...

#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 với các lớp học, điều này sẽ làm việc một cách dễ dàng quá .