Question

当我将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/

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)。

Answer 2

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

nth-child没有按预期工作

2 个答案: