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