我有这个代码:
<html>
<head>
<style type="text/css">
* > ul li:nth-child(4n+3) { color: red; }
</style>
</head>
<body>
<ul>
<li id="A" class="u">1</li>
<li>
<ol>
<li id="B" class="u">2.1</li>
<li id="C" class="g">2.2</li>
<li id="D" class="u">2.3</li>
<li id="E" class="g">2.4</li>
</ol>
</li>
<li id="F" class="u">3</li>
</ul>
</body>
</html>
在此它选择了 2.3 和 3 但我不明白这是怎么发生的。
我的想法是:它同时选择相对于父元素处于奇数位置的两个元素。但是 2.3 真的是第 3 位还是第 7 位？我真的卡住了，请帮忙。
最佳答案
* > ul li:nth-child(4n+3)
首先，这个选择器开头的 * > 是完全多余的(它告诉浏览器寻找一个 ul 是其他东西的 child ；任何东西else。当然，所有 ul 元素都是；如果不出意外，它们将位于 body 标记内)。
所以你可以删除它。这将使它更易于使用和解释。
现在我们只剩下这个了:
ul li:nth-child(4n+3)
它同时选择 2.3 和 3 的原因是因为你的 li 元素集都是从单亲 ul 元素。在选择器之间使用空格告诉浏览器寻找匹配的任何后代；它不关心要在树下多远的地方寻找匹配的 li 元素，所以它会找到两个集合。
要回答关于为什么 2.3 不被视为集合中的第七个元素的问题，答案是 CSS 将每组 li 元素视为一个完整的元素单独的组；即使选择器恰好像原始选择器那样匹配两组或更多组元素，它仍会为每个元素运行一个单独的计数器，因此 2.3 和 3 都会被看到作为各自集合中的第三个元素。
如果您只想选择ul 的子元素(即在层次结构中立即在它下面)，您需要使用子选择器 (>) 而不仅仅是一个空格。
ul > li:nth-child(4n+3)
这现在只会选择 li 元素的外部集合，因此只会选择您的 3 元素。
希望这有助于解释事情。
顺便说一句，在更一般的说明中，您可能会发现这很有用:CSS '>' selector; what is it?
关于html - 为什么nth-child选择器会选择这些元素呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17923117/