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

2016-09-08 本文已影响500人江君同学

逼自己说几句

这篇文章是从我上一个简书账号里粘贴过来的，当时第一次学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标签是否为第一个子元素）

定义的深度解析

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

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

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

<div class="parent">
  <div>Child</div>/*first-child*/
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

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

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

div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

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

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

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

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

实例运用

代码地址

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>first-child对比first-of-type</title>
<style>
.parent :first-child{
  color: red;
}
.parent :first-of-type{
  background: yellow;
}
.parent div:first-child{
  font-size: 50px;
}
.parent div:nth-child(3){
  text-decoration: line-through;
}
.parent div:first-of-type{
  border: 1px green solid;
}
.parent p:first-child{
  text-decoration: underline;
}
</style>
</head>
<body>
<div class="parent">
  <p>child1</p>
    <div>child2</div>
    <div>child3</div>
    <div>child4</div>
  </div>
</body>
</html>

运行结果：

详细分析以上代码得出：

.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日