html – CSS nth-child错过了元素

好像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;
}

解决方法

使用 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

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...