logo标签列表

nth-child在使用时不如预期效果。

htmlcsscss-selectors
9
当我将使用 nth-child 的对象与 div 相结合时，似乎会出现问题。 感谢任何对此的帮助。
<html>
<style>
.documents > a:nth-child(2) {
    border:1px solid red;
}
</style>

<div class="documents">
    <!-- NO DIVS: WORKS FINE -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><!-- ONE DIV: STARTS WITH THE FIRST OBJECT -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><div></div><!-- TWO DIVS: DOES NOT WORK -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
</html>

http://jsfiddle.net/nwrhU/

2个回答
25

这不是错误的行为; 只是对于 :nth-child() 的工作原理存在着普遍误解。

当你在开头添加 div 元素时，你要查找的 a 不再成为整个元素的第二个子元素（这正是 :nth-child(2) 的意思）。这是因为当你添加一个 div 时，它就成为了第一个子元素；接着，第一个 a 就成为了第二个子元素，第二个 a 就成为了第三个子元素。当你添加第二个 div 时，该 div 成为了第二个子元素，a 元素也随之向前推进了一步，因此 a:nth-child(2) 不再匹配任何内容。

如果您想查找第二个 a，而不考虑其兄弟姐妹中的其他元素类型，请改用 a:nth-of-type(2)。

0

在计数时，nth-child 考虑所有子元素，并仅对与所选元素匹配的元素进行样式设置。 另一方面，nth-of-type 在计数时仅考虑与我们正在搜索的元素匹配的子元素。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接