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的子元素，匹配到的是它们中的第一个。

first-child和first-of-type

原文：https://www.cnblogs.com/lijianming180/p/12262509.html