css 伪类选择器:first-child与:first-of-type的区别

时间:2016-08-04
css :first-child用于匹配父元素的第一个子元素,而:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素,本文章向大家介绍css伪类选择器:first-child与:first-of-type的区别以及使用实例,需要的朋友可以参考一下。

css :first-child选择器匹配属于父元素中第一个子元素。

css :first-of-type选择器匹配元素其父级是特定类型的第一个子元素。

对于很多朋友来说,上面的两句解释并不是很清楚,下面小编通过实例向大家解释first-child和first-of-type。

先看一下:first-child实例:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>码农教程</p>

<h1>java教程</h1>
<p>php教程</p>
/* http://www.manongjc.com/article/1305.html */
<div class="div1">
  <span>css教程</span>
  <p>mysql教程</p>
  <p>html教程</p>
</div>
<div class="div2">
  <p>sql教程</p>
  <p>js教程</p>
</div>
</body>
</html>

运行结果图:

css 伪类选择器:first-child与:first-of-type的区别

为什么"码农教程"和"sql教程"会被选中呢?

因为p:first-child是匹配所有html文档中父元素的第一个子元素是p的元素,这里要注意两点:

  1. 第一,是在整个HTML文档中匹配
  2. 第二,父元素的第一个子元素必须是p元素,如果不是p元素就无法匹配到。

上面实例中"<p>码农教程</p>"作为body元素的第一个子元素,并且该子元素也是p标签,所以会被匹配到。

"<p>mysql教程</p>"作为div元素(class为div1)的子元素,虽然它是p元素,但是它不是div(class为div1)的第一个子元素,所以没有被匹配到。

"<p>sql教程</p>"作为div元素(class为div2)的第一个子元素,并且也是p元素,所以会被匹配到。

 

下面再来看一下first-of-type实例:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background-color:yellow;
}
</style>
</head>
<body>
<p>码农教程</p>

<h1>java教程</h1>
<p>php教程</p>

<div>
  <span>css教程</span>
  <p>mysql教程</p>
  <p>html教程</p>
</div>
<div>
  <p>sql教程</p>
  <p>js教程</p>
</div>
</body>
</html>

运行结果如下:

css 伪类选择器:first-child与:first-of-type的区别

p:first-of-type需要注意两点:

  1. 第一,是在整个HTML文档中匹配
  2. 第二,p:first-of-type选取的是父元素里的第一个子元素p标签,并不要求父元素的第一个子元素必须是p标签。

上面实例中,body的第一个p标签子元素为"<p>码农教程</p>",所以该元素会被选中。

同理“<p>mysql教程</p>”和"<p>sql教程</p>"作为div(class为div1和class为div2)元素的第一个p标签,所以也会被选中.

 

综上所述:

:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。

:first-child要求子元素的第一个元素必须是特定标签,而:first-of-type并没有要求这点。

上一页 下一页

原文地址:http://www.manongjc.com/article/1305.html