17

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

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

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()选择器相互堆叠？

4

2 回答 2

9

你拥有的选择器——

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/

于 2012-09-10T17:03:37.507 回答
8

您: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; }
于 2012-09-10T16:56:14.300 回答