nth-child没有按预期工作

Question

nth-child没有按预期工作

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

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/nwrhU/

Answer 1

Bol*_*ock 21

这不是错误的行为; 对于如何:nth-child()运作只是一种常见的误解.

当您div向开头添加元素时a,您正在寻找的元素不再成为整体的第二个孩子(这:nth-child(2)意味着什么).这是因为当你添加一个div,那就成了第一个孩子; 反过来,第一个a成为第二个孩子,第二个a成为第三个孩子.当你添加第二个时div,它div会成为第二个子a元素,并且元素同样会向前推进另一个步骤,因此a:nth-child(2)不再匹配任何内容.

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

归档时间：	12 年，9 月前
查看次数：	6301 次
最近记录：	12 年，9 月前