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

╰+哭是因爲堅強的太久メ 2021-10-01 02:12 277阅读 0赞

## [css选择器中:first-child与:first-of-type的区别][css_first-child_first-of-type] ##

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：

[![QQ截图20140210135428][QQ_20140210135428]][QQ_20140210135428_QQ_20140210135428]

p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；

h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；

span:first-child  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；

然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？还是看那段代码：

[![QQ截图20140210135428][QQ_20140210135428 1]][QQ_20140210135428_QQ_20140210135428 1]

p:first-of-type  匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；

h1:first-of-type  匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；

span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

所以，通过以上两个例子可以得出结论：

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

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

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解

转载于:https://www.cnblogs.com/my--sunshine/p/6872179.html

[css_first-child_first-of-type]: http://www.cnblogs.com/2050/p/3569509.html
[QQ_20140210135428]: https://images0.cnblogs.com/blog/130623/201402/261609103381767.png
[QQ_20140210135428_QQ_20140210135428]: /images/20210724/618b54c3226941b89c377d7b13ea1696.png
[QQ_20140210135428 1]: https://images0.cnblogs.com/blog/130623/201402/261609112053896.png
[QQ_20140210135428_QQ_20140210135428 1]: /images/20210724/624a0507ad8f44cdb529dc7fd600f2d7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 ==与===的区别

== 和===的区别在于===不会转型 ==会转型。 1、当Number和String进行比较时，会将String转换成Number，也就是toNumber。 2、当其他类

「爱情、让人受尽委屈。」/ 2022年12月28日 07:28/ 0 赞/ 406 阅读

相关 #{}与${}的区别

\\{\}与$\{\}的区别区别 1. \\{\} 解析为一个 JDBC 预编译语句（prepared statement）的参数标记符，一个 \\{ \} 被解析为

喜欢ヅ旅行/ 2022年12月22日 09:57/ 0 赞/ 225 阅读

相关 ie6.0 first:child ,firstchild,css-firstchild,css first-child

首先下载jquery3.0 或者其他版本 html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

太过爱你忘了你带给我的痛/ 2022年08月13日 12:51/ 0 赞/ 129 阅读

相关兼容的firstChild,lastChild,nextSibling,previousSibling

在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了

╰+哭是因爲堅強的太久メ/ 2022年07月15日 04:16/ 0 赞/ 121 阅读

相关兼容的firstChild,lastChild,nextSibling,previousSibling

在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了

男娘i/ 2022年07月15日 04:16/ 0 赞/ 157 阅读

相关浅谈childNodes和children以及firstChild和firstElementChild

1、childNodes属性：返回指定元素的子节点集合，包括元素节点和文本节点。除了IE9和Firefox，其他浏览器都支持通过childNodes\[i\]获取第i个

╰半橙微兮°/ 2022年06月16日 05:17/ 0 赞/ 207 阅读

相关 js下firstElementChild以及firstChild，Children的用法

一、 <div> <p>123</p> </div> 在上面这段代码中，如果使用以下js代码 var oDiv=document.

雨点打透心脏的1/2处/ 2022年06月03日 04:54/ 0 赞/ 202 阅读

相关 ==与===的区别

== 只要判断值一样，就能返回true，不判断数据类型； === 需要判断值，也要判断数据类型，都一样才返回true；如： var a=1,b="1"; if(

深藏阁楼爱情的钟/ 2022年05月26日 08:20/ 0 赞/ 408 阅读

相关 +=与=+的区别

\+=与=+的区别今天做LeetCode的时候，键盘敲得快了点，后来程序运行结果和设想相差很离谱，于是在关键位置逐行仔细检查代码，发现自己无意间把+=写成了=+（编译并

墨蓝/ 2022年05月09日 12:33/ 0 赞/ 475 阅读

相关 JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

访问节点通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerD

矫情吗；*/ 2021年08月13日 16:28/ 0 赞/ 475 阅读