html – 为什么第n个子选择器选择这些元素？

发布时间：2020-12-14 23:07:43 所属栏目：资源来源：网络整理

导读：我有这个代码：在这里它选择2.3和3,但我不明白这是如何发生的. 我的想法是：它同时选择相对于父元素的奇数位置的两个元素.但2.3真的是第3位还是7位？我真的被卡住了,请帮忙. JSFiddle Sample 最佳答案 * ul li:nth-child(4n+3) 首先,*>在这个选择器的开头是

我有这个代码：


在这里它选择2.3和3,但我不明白这是如何发生的.
我的想法是：它同时选择相对于父元素的奇数位置的两个元素.但2.3真的是第3位还是7位？我真的被卡住了,请帮忙.
JSFiddle Sample


最佳答案

* > 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的子元素(即在heirarchy中紧接其下方),则需要使用子选择器(>)而不仅仅是空格.

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

现在,这将只选择li元素的外部集合,因此只会拾取您的3个元素.
希望有助于解释事情.
顺便说一下,在更一般的说明中,您可能会发现这很有用：CSS ‘>’ selector; what is it?
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!