我并排放置了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()
选择器彼此?
你有的选择器 -
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; }
你有的选择器 -
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; }
你原因 :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; }