问题 CSS:nth-​​of-type()和:not()选择器?


我并排放置了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() 选择器彼此?


7092
2017-09-10 16:53


起源



答案:


你有的选择器 -

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


7
2017-09-10 17:03



谢谢,这很有效 - 甚至认为我没有得到它。对此有何解释? - matt
@matt老实说,我不知道。盯着MDN doc开了5分钟,我仍然感到困惑。这个不成立。 developer.mozilla.org/en-US/docs/CSS/clear - McGarnagle
实际上,问题似乎是在选择器中。请注意,您正在申请 clear: left 至 :nth-of-type(4n+2) 而不是 :nth-of-type(4n+1) 在原来的;你的 clear: right 在原始选择器上没有任何效果,因为没有任何元素浮动到右侧。 - BoltClock♦
@BoltClock你是对的, clear:right CSS没有效果: jsfiddle.net/8MuCU/1。然而,:不是选择器 不 工作: jsfiddle.net/8MuCU/2。我认为问题在于 :不 伪类不影响第n类型计算。 - McGarnagle
@dbaseman:这就是我在原始答案中指出的。看起来我们都互相困惑;) - BoltClock♦


答案:


你有的选择器 -

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


7
2017-09-10 17:03



谢谢,这很有效 - 甚至认为我没有得到它。对此有何解释? - matt
@matt老实说,我不知道。盯着MDN doc开了5分钟,我仍然感到困惑。这个不成立。 developer.mozilla.org/en-US/docs/CSS/clear - McGarnagle
实际上,问题似乎是在选择器中。请注意,您正在申请 clear: left 至 :nth-of-type(4n+2) 而不是 :nth-of-type(4n+1) 在原来的;你的 clear: right 在原始选择器上没有任何效果,因为没有任何元素浮动到右侧。 - BoltClock♦
@BoltClock你是对的, clear:right CSS没有效果: jsfiddle.net/8MuCU/1。然而,:不是选择器 不 工作: jsfiddle.net/8MuCU/2。我认为问题在于 :不 伪类不影响第n类型计算。 - McGarnagle
@dbaseman:这就是我在原始答案中指出的。看起来我们都互相困惑;) - BoltClock♦


你原因 :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; }

5
2017-09-10 16:56



一如既往......一个有意义的答案,谢谢! - Kostas Siabanis