:first-child 有时候不起作用

Pope
  • 50

比如下面的代码,不知为什么第一个article的字体不会变色?
html

<h1>logo</h1>
<article>article1</article>
<article>article2</article>
<article>article3</article>

css

article:first-child {
    color: red;
}​

运行效果
http://jsfiddle.net/M9EBA/

回复
阅读 22.5k
6 个回答

使用:first-child伪类时一定要保证前面没有兄弟节点,把h1去掉就可以;或者使用div包住article,然后css:div article:first-child

明明第二个开始才是article tag嘛。。。
h1 + article { ... }

你现在的选择器是选择“任意元素的第一个子元素,且这个子元素为article”

Vernsu
  • 1
新手上路,请多包涵

:first-child 这个伪类,只有当元素是其父元素的第一个子元素时才能匹配。
即只有当<article>是父元素的第一个子元素时该选择器才生效。
在不改变HTML代码的情况下可以用相邻同胞选择器达到想要的效果:

h1 + article {
    color: red;
}    

或者使用:nth-child达到同样的效果:

article:nth-child(2){
    color: red;
}  
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏