first-child和first-of-type

我想实现的效果：将第一个article字体颜色设置为红色

1 2 3 4 5 6

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

first-child

匹配某父元素的第一个子元素，可以说是结构上的第一个子元素。

用 first-child 不能实现想要的效果

1 2	article:first-child { color: red;}

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

first-of-type

匹配某父元素下相同类型子元素中的第一个

1 大专栏  first-child和first-of-type class="line">2 3

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

可以实现想要的效果

详解

1 2 3 4 5 6

<div> <h1>CSS学习</h1> <p>CSS学习</p> <article>CSS学习</article> <article>CSS学习</article> </div>

1、first-child
h1:first-child 匹配到的是h1元素,因为h1元素是div的第一个子元素；

p:first-child 匹配不到任何元素，因为在这里p是div的第二个子元素，而不是第一个；

article:first-child 匹配不到任何元素，因为在这里两个article元素都不是div的第一个子元素；

2、first-of-type
h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；

article:first-of-type 匹配到的是第三个子元素article。这里div有两个为article的子元素，匹配到的是它们中的第一个。