关于伪类选择器first-child和first-of-type

逼自己说几句

---

这篇文章是从我上一个账号里粘贴过来的，当时第一次学CSS选择器，记得很清楚，对于first-child和fitst-of-type确实比较懵，于是整理了他们俩的区别。

记得当时总结出来的时候有一种茅塞顿开的感觉。

所以还是说，自学，还是需要不断去写技术性博客，真的很有用。

两者的定义

---

• :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
• :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

定义的解析

---

• :first-child 当出现 p:first-child 时，其所匹配的元素必须符合以下两点：1.必须为p标签；2.必须为某个父元素的第一个子元素

• :first-of-type 当出现 p:first-of-type 时，其所匹配的元素为所有子元素中的第一个p标签（不论该p标签是否为第一个子元素）

定义的深度解析

---

一个父元素会包括一个或多个子元素

  
Child
  
Child
  
Child
  
Child

在这些子元素中，只有一个是排名第一的，这就是：first-child

  
Child
/*first-child*/
  
Child
  
Child
  
Child

first-of-type 与 first-child 的区别在于它匹配的是该元素类型的第一个子元素，可能这个元素并不是该父元素的第一个子元素

如果 XXX:first-child 存在，任何的 XXX:first-child 肯定是 XXX:first-of-type

div class="parent">
  
Child
 
  
Child
  
Child
  
Child

如果把上面的代码的子元素的第一个 div 给换掉，比如换成 h1 ，那么这个 h1 仍然是其父元素的第一个子元素，但是已经不是第一个 div 了。第二行的 div 是其父元素的第二个子元素，而且是第一个 div 。具体的注释请看如下的代码：

  
Child
   
  
Child
 
  
Child
  
Child

同时， first-child 在任何情况下都只能匹配到一个元素，而 first-of-type 在一些情况下能匹配到不止一个元素，如下代码：

  
Child
   
  
Child
 
  
Child
  
Child

实例运用

---

代码地址

  
  




  
child1
    
child2
    
child3
    
child4
  

运行结果：

详细分析以上代码得出：

.parent :first-child{
  color: red;
}

以上代码匹配parent这个父元素的首个子元素，所以child1变成了红色

.parent :first-of-type{
  background: yellow;
}

以上代码匹配parent这个父元素的所有标签的首个子元素，其中parent的第一个子元素是p，同时也是第一个p，parent的第二个子元素是div，同时也是第一个div，所以child1和child2的背景颜色变成了黄色

.parent div:first-child{
  font-size: 50px;
}

以上代码匹配parent这个父元素的首个子元素，并且这个首个子元素必须为div，然而parent这个父元素的首个子元素为p，所以没有任何的元素被匹配上

.parent div:nth-child(3){
  text-decoration: line-through;
}

以上代码匹配parent这个父元素的第三个子元素，并且这个子元素为div，所以child3有删除线的效果

.parent div:first-of-type{
  border: 1px green solid;
}

以上代码匹配parent这个父元素的第一个div子元素，所以child2有实现框的效果

.parent p:first-child{
  text-decoration: underline;
}

以上代码匹配parent这个父元素的第一个子元素，并且这个子元素为p，所以child1有下划线的效果

---

参考文章：

• Stack Overflow: what-is-the-difference-between-first-child-and-first-of-type

（完）

文档信息

• 自由转载-非商用-非衍生-保持署名
• 发表日期：2016年9月8日