html - 为什么第 n 个子选择器会选择这些元素?

原文 标签 html css css-selectors

我有这个代码:

<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.33但我不明白这是怎么发生的。

我的想法是:它同时选择相对于父元素奇数位置的两个元素。但是是2.3真的是第三位还是第七位?我真的卡住了,请帮忙。

JSFiddle Sample

最佳答案

* > ul li:nth-child(4n+3)

首先,* >在这个选择器的开头是完全多余的(它告诉浏览器寻找一个 ul,它是其他东西的 child ;其他任何东西。当然所有 ul 元素都是;如果没有别的,它们将是在 body 标签内)。

所以你可以删除它。这将使使用更简单,更易于解释。

现在我们只剩下这个了:
ul li:nth-child(4n+3)

它同时选择的原因 2.33是因为你的两套li元素继承自单亲 ul元素。在选择器之间使用空格告诉浏览器查找任何匹配的后代;它不关心在树下多远寻找匹配 li元素,所以它找到两个集合。

回答您关于为什么的问题 2.3不被视为集合中的第七个元素,答案是 CSS 看到每组 li元素作为一个完全独立的组;即使选择器碰巧像原始选择器一样匹配了两组或更多组元素,它仍然会为每个元素运行一个单独的计数器,因此 2.33都被视为各自集合中的第三个元素。

如果您只想选择作为 ul 的子元素的元素(即在层次结构中紧邻它的下方),您需要使用子选择器( > )而不仅仅是一个空格。
ul > li:nth-child(4n+3)

这现在只会选择 li 的外部集元素,所以只有您的 3元素将被拾取。

希望这有助于解释事情。

顺便说一句,在更一般的情况下,您可能会发现这很有用:CSS '>' selector; what is it?

关于html - 为什么第 n 个子选择器会选择这些元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17923117/

相关文章:

html - 使用CSS在类的中心对齐内容?

javascript - Chrome扩展程序-页面更新两次,然后在YouTube上删除了

javascript - 搜索引擎是在加载JS之前还是之后读取HTML?

javascript - 如何读取作为内部html动态插入到表格单元格的html表格内部复选框的值?

html - 为什么 flex 元素不能缩小到超过内容大小?

excel - 需要帮助以使用Excel VBA Selenium Basic选择Chrome中的单选按钮(第二部分)

javascript - React Materialize Parallax图像不与背景滚动

css - 具有一个完整的<div> float 右边,其中包含一个<p>元素和一个<a>元素

html - CSS子元素的高度问题

jquery - 如何从CSS排除特定控件?