CSS:nth-​​of-type()和:not()选择器？

Question

我并排放置了25%宽的物品.我clear:both在每四个元素之后添加一个.但是我需要在元素之间插入一个图形分节符.它必须在里面<ul>.为了有效,我将"section-break"(下面样本中的第一个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>我上面的示例代码中的最后一个浮动到下一行但是不应该发生,因为第一行<li>不是浮动文章之一但包含标题.

是否可以堆叠:not和nth-of-type()选择到对方？

Answer 1

你有的选择器 -

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

- 完全正确(如突出显示选择器所示).

问题在于你如何使用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/

Answer 2

你:not()看起来不起作用的原因是因为它li.year与元素的其他元素具有相同的元素类型li(自然地),因此:nth-of-type(4n+1)无论.year类如何都匹配相同的元素.

也不可能顺序堆叠选择器.这不是他们的工作方式.

既然你不能改变你的li元素的东西,因为其他HTML标记规则,:nth-match()是在未来的规范,并没有实现,你必须做出改变你做的:nth-of-type()公式,以适应结构,而不是:

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