CSS :nth-of-type() and :not() selector?

Question

我并排放置了 25% 宽的文章。我要添加 clear:both在每四个元素之后。但是我需要在元素之间插入一个图形分节符。它必须在 <ul> 内.为了有效，我将“分节符”(下面示例中的第一个 li 项)包装到 <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>

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

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

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

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

现在是最后一个<li>在我上面的示例代码中 float 到下一行但是自第一个 <li> 以来不应该发生这种情况不是 float 文章之一，但包含标题。

是否可以堆叠 :not和 nth-of-type()选择器相互叠加？

Answer 1

你的选择器--

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

-- 完全正确 ( as shown by highlighting the selector )。

问题在于您如何使用 clear。如果您使用 clear:right，然后在以下元素上使用 clear:left，它会起作用:

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

根据评论编辑 删除的文字是无稽之谈。根据 BoltClock 的回答，真正的问题是 :not 伪类不影响 nth-of-type。在这种情况下，调整选择器偏移量是巧合，但如果 :not 模式不同，则不会起作用。

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

http://jsfiddle.net/8MuCU/