:first-child与:first-of-type 区别

快乐打工仔 分类:实例代码

:first-child与:first-of-type 区别属于前端实例代码,有关更多实例代码大家可以查看

标题中两个选择器的更多用法可以参阅如下两篇文章:

(1).CSS E:first-child 选择器一章节。

(2).CSS E:first-of-type 选择器一章节。

两个选择器在某些场景下表现完全一致,所以会造成一些困扰。

功能简述如下:

(1).E:first-child选择器匹配父元素下,E类型,第一个子元素,。

(2).E:first-of-type选择器匹配父元素下,E类型、相同类型标签元素集合中第一个子元素。

首先给出两个选择器的区别简单总结:

E:first-child匹配的是父元素的第一个子元素(E类型)。

而E:first-of-type匹配的是父元素下各个标签类型集合中第一个子元素(E类型)。

看了前面的总结如果还不太清晰,不用担心,后面有详细的代码演示。

特别说明:E表示一个CSS选择器,不要误解为仅表示元素选择器。

首先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#one li:first-child{
  color:blue;
}
#two li:first-of-type{
  color:blue;
}
</style>
</head>
<body>
  <ul id="one">
    <li>犀牛前端部落一</li>
    <li>犀牛前端部落二</li>
    <li>犀牛前端部落三</li>
    <li>犀牛前端部落四</li>
  </ul>
  <ul id="two">
    <li>犀牛前端部落一</li>
    <li>犀牛前端部落二</li>
    <li>犀牛前端部落三</li>
    <li>犀牛前端部落四</li>
  </ul>
</body>
</html>

代码运行效果截图如下:

前端教程

上述代码中两个选择器表现完全相同,再来看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#one span:first-child{
  color:blue;
}
#two span:first-of-type{
  color:blue;
}
span{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
  <div id="one">
    <p>犀牛前端部落一</p>
    <span>犀牛前端部落二</span>
    <span>犀牛前端部落三</span>
    <h1>犀牛前端部落四</h1>
  </div>
  <div id="two">
    <p>犀牛前端部落一</p>
    <span>犀牛前端部落二</span>
    <span>犀牛前端部落三</span>
    <h1>犀牛前端部落四</h1>
  </div>
</body>
</html>

代码运行效果截图如下:

前端教程

span:first-child匹配div第一个子元素,但最必须是span元素,所以第一个div中没有符合要求的。

span:first-of-type匹配div下第一个span元素。

上面的代码并没有完全体现出E:first-of-type选择器的功能,下面单独对其进行一下演示。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.a:first-of-type{
  color:blue;
}
span,a{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
  <div>
    <p class="a">犀牛前端部落一</p>
    <span class="a">犀牛前端部落二</span>
    <span>犀牛前端部落三</span>
    <h1>犀牛前端部落四</h1>
    <h1 class="a">犀牛前端部落四</h1>
    <a>犀牛前端部落四</a>
  </div>
</body>
</html>

代码运行效果截图如下:

前端教程

代码分析如下:

(1).首先使用利用class选择器匹配到所有class属性值为"a"的元素。

(2).然后按照标签类型将匹配到元素进行分类,将每一个类别中的第一个元素颜色设置为蓝色。

(3).p元素只有一个,当然也算是第一个,所以字体颜色设置为蓝色。

(4).具有两个span元素,但是class属性值等于"a"的那个是span元素集合的第一个,所以匹配成功。

(5).具有两个h1元素,class属性值为"a"的h1元素位于h1元素集合第二位,匹配失败。

最后总结如下:

E:first-child满足如下两个条件即可匹配成功:

(1).元素被E选择器匹配。

(2).且位于父元素的第一位。

E:first-of-type匹配成功需要满足如下条件:

(1).元素被E选择器匹配。

(2).且元素位于各个标签类别集合的第一位。

:first-child与:first-of-type 区别,这样的场景在实际项目中还是用的比较多的,关于:first-child与:first-of-type 区别就介绍到这了。

回复

我来回复
  • 暂无回复内容