CSS: nth-of-type() và: not() selector?

Question

Tôi có các bài viết nổi bên cạnh rộng 25%. Tôi đang thêm clear:both sau mỗi phần tử thứ tư. Tuy nhiên tôi cần phải chèn một phần-break đồ họa inbetween các yếu tố. Và nó phải nằm trong số <ul>. Để có giá trị, tôi đã bao bọc "phần-break" (mục li đầu tiên trong mẫu bên dưới) thành một số <li>.

<ul> 
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
</ul> 

Tôi muốn mọi yếu tố thứ tư là một ngắt dòng vì vậy tôi sử dụng ...

ul li:nth-of-type(4n+1) { clear: both; } 

Tuy nhiên tôi muốn li.year không bị ảnh hưởng bởi hành vi này vì vậy tôi cố gắng này

ul li:not(.year):nth-of-type(4n+1) { clear: both; } 

Ngay bây giờ cuối cùng <li> trong mã mẫu của tôi ở trên được thả nổi vào dòng tiếp theo nhưng điều đó không nên xảy ra kể từ khi <li> đầu tiên không phải là một trong các phao d bài viết nhưng chứa tiêu đề.

Có thể xếp bộ chọn :not và nth-of-type() lên nhau không?

Answer 1

Bộ chọn mà bạn có -

ul li:not(.year):nth-of-type(4n+1) { background: yellow; } 

- là hoàn toàn chính xác (as shown by highlighting the selector).

Vấn đề là cách bạn đang sử dụng clear. Nó hoạt động nếu bạn sử dụng clear:right, và sau đó clear:left trên các yếu tố sau:

ul li:not(.year):nth-of-type(4n+1) { clear: right; } 
ul li:not(.year):nth-of-type(4n+2) { clear: left; } 

Sửa một cảm Văn bản bị ảnh hưởng ra là vô nghĩa. Vấn đề thực sự, theo câu trả lời của BoltClock, là lớp giả :not không ảnh hưởng đến nth-of-type. Việc điều chỉnh bù bộ chọn hoạt động trong trường hợp này là trùng hợp ngẫu nhiên, nhưng sẽ không hoạt động nếu mẫu :not khác nhau.

ul li:not(.year):nth-of-type(4n+2) { clear: left; } 

http://jsfiddle.net/8MuCU/

Answer 2

Lý do bạn :not() không xuất hiện để làm việc là do li.year là loại yếu tố tương tự như phần còn lại của li yếu tố của bạn (tự nhiên), vì vậy :nth-of-type(4n+1) phù hợp với các yếu tố như nhau bất kể lớp .year.

Không thể xếp chồng các bộ chọn theo tuần tự. Đó không chỉ là cách họ làm việc.

Vì bạn không thể thay đổi li yếu tố của bạn để cái gì khác bởi vì các quy tắc đánh dấu HTML, và :nth-match() là trong một future spec và đã chưa thực hiện được, bạn phải làm gì với việc thay đổi công thức :nth-of-type() của bạn để phù hợp với cấu trúc thay vì:

ul li:not(.year):nth-of-type(4n+2) { clear: both; }