CSS：nth-​​of-type（）和：not（）selector？ [英] CSS :nth-of-type() and :not() selector?

问题描述

我已经浮动了25％宽的文章。我在每第四个元素后添加清除：两个。但是我需要在元素之间插入一个图形节。它必须在< ul> 中。为了有效，我将section-break（下面的示例中的第一个li项）包装成< li> 。

I have floated articles side by side that are 25% wide. I'm adding a clear:both after every fourth element. However I need to insert a graphical section-break inbetween the elements. And it has to be inside the <ul>. To be valid I wrapped the "section-break" (the first li item in the sample underneath) into a <li> as well.

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

我希望每四个元素都是换行符，所以我使用...

I want every fourth element to be a line break so I use …

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

但我想要 li.year 不受此行为的影响，所以我试过这个

However I want the li.year not to be affected by this behaviour so I tried this

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

现在最后< li> 在我的示例代码浮动到下一行，但不应该发生，因为第一个< li> 不是浮动的文章之一， 。

Right now the last <li> in my sample code above is floated into the next line but that shouldn't happen since the first <li> isn't one of the floated articles but contains a headline.

可以堆叠：not 和 nth- ）选择器到对方？

Is it possible to stack the :not and nth-of-type() selector onto each other?

推荐答案

$ b

The selector you have --

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

- 完全正确（，如突出显示选择器所示）。

-- is perfectly correct (as shown by highlighting the selector).

问题是您如何使用清除。如果在以下元素上使用 clear：right ，然后使用 clear：left b
$ b

The issue is with how you're using clear. It works if you use clear:right, and then clear:left on the following element:

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

strong>根据评论进行修改被选中的文字是无意义的。根据BoltClock的答案，真正的问题是：not 伪类不影响 nth-of-type 。在这种情况下调整选择器偏移是巧合，但如果：not 模式不同，则无效。

Edit per comments The stricken-out text is nonsense. The real issue, as per BoltClock's answer, is that the :not pseudo-class doesn't affect nth-of-type. Adjusting the selector offset works in this case by coincidence, but would not work if the :not pattern was different.

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

http://jsfiddle.net/8MuCU/

这篇关于CSS：nth-​​of-type（）和：not（）selector？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！