解决css3中 :first-child 有时候不起作用

解决css3中 :first-child 有时候不起作用，平时在写css3的时候没有注意伪类 :first-child、:last-child的作用域，一直会搞混淆了，:first-child 官方给的定义是：选择器用于选取属于其父元素的首个子元素的指定选择器。同理 :last-child 就是其父元素之类的最后一个子元素了。

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

<h1>logo</h1>

<article>article1</article>

<article>article2</article>

<article>article3</article>

css

article:first-child {

        color: red;
}

执行之后并没有看到效果。

解决方案：

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

html

<h1>logo</h1>

<div class="first-child-demo">

       <article>article1</article>

       <article>article2</article>

       <article>article3</article>

</div>

css

article:first-child {

        color: red;
}

这时候执行就有效了。