Rae*_*kim 5 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.3,3但我不明白这是如何发生的.
我的想法是:它同时选择相对于父元素的奇数位置的两个元素.但2.3真的是第3位还是7位呢？我真的被卡住了,请帮忙.
* > ul li:nth-child(4n+3)
首先,* >在这个选择器的开头是完全多余的(它告诉浏览器寻找一个ul其他东西的孩子;其他任何东西.当然所有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'>'选择器; 它是什么？