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

- 完全正确（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/

Answer 2

:not()似乎不起作用的原因是因为li.year与其他li元素（自然）元素类型相同，所以{{1无论:nth-of-type(4n+1)类如何，都匹配相同的元素。

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

由于HTML标记规则导致您无法将.year元素更改为其他元素，并且li位于future spec且尚未实施，因此您必须更改:nth-match()公式以适应结构：

:nth-of-type()

CSS：nth-of-type（）和：not（）选择器？

2 个答案:

CSS：nth-​​of-type（）和：not（）选择器？

2 个答案:

CSS：nth-of-type（）和：not（）选择器？