预期第n个孩子不工作(nth-child does not work as expected)

2019-08-08 17:16发布

当我和我使用的第n个孩子的对象添加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/

Answer 1:

这不是错误行为; 还有的干脆就是怎样一个普遍的误解:nth-child()的作品。

当您添加div元素的开始， a你正在寻找不再成为第二个孩子的整体（这是什么:nth-child(2)表示）。这是因为当你添加一个div ，这将成为第一个孩子; 反过来，第a成为第二个孩子，第二个a成为第三个孩子。当您添加第二个div ，该div成为第二个孩子和a元素同样被推向前迈进了一步，所以a:nth-child(2)不再匹配任何东西。

如果你正在寻找的第二个a ，无论它的兄弟姐妹中任何其他元素类型，使用a:nth-of-type(2)来代替。

文章来源: nth-child does not work as expected