:first-child 有时候不起作用

Question

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

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

css

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

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

Answer 1

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

Answer 2

你要的应该是

article:first-of-type {
    color: red;
}​

分清:first-of-type和:first-child

http://css.doyoe.com/selectors/pseudo...
http://css.doyoe.com/selectors/pseudo...

Answer 3

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

Answer 4

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

Answer 5

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

h1 + article {
    color: red;
}    

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

article:nth-child(2){
    color: red;
}  

Answer 6

这个也行！

article:nth-child(2){
   color: red;
}