9

当我将 div 与我使用 nth-child 的对象一起添加时，它似乎有问题。

我会很感激这方面的任何帮助。

<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/

4

2 回答 2

24

这不是错误行为；对工作原理存在一个普遍的误解:nth-child()。

当您将div元素添加到开头时a，您正在寻找的不再成为整体上的第二个孩子（这就是:nth-child(2)意思）。这是因为当您添加一个时div，它成为第一个孩子；反过来，第一个a成为第二个孩子，第二个a成为第三个孩子。当您添加一个 seconddiv时，它将div成为第二个子元素，并且a元素同样会向前推进一步，因此a:nth-child(2)不再匹配任何内容。

如果您正在寻找第二个a而不考虑其兄弟元素中的任何其他元素类型，请a:nth-of-type(2)改用。

于 2013-01-29T10:03:22.613 回答
0

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

于 2021-07-27T02:23:26.493 回答