最佳答案
* > 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?
