CSS nth-child错过了元素

Question

似乎css nth-child错过了它的目标，有什么想法吗？

jsFiddle source

HTML：

<a href="#">red</a>
<br />
<a href="#">none</a>
<br />
<a href="#">gray</a>

CSS：

a:nth-child(1) {
    color:red;
}
a:nth-child(3) {
    color:gray;
}

Answer 1

使用nth-of-type()代替nth-child()，如果您删除<br/>代码，它将完美有效，因为@FritsvanCampen评论它被视为儿童

a:nth-of-type(1) {
    color:red;
}
a:nth-of-type(3) {
    color:gray;
}

为了更好地理解，请参阅：http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Fiddle