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

「爱情、让人受尽委屈。」 2021-09-20 07:26 139阅读 0赞

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

1 <div>
    2     <p>第一个子元素</p>
    3     <h1>第二个子元素</h1>
    4     <span>第三个子元素</span>
    5     <span>第四个子元素</span>
    6 </div>

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

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

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

:first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。

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

1 <div>
    2     <p>第一个子元素</p>
    3     <h1>第二个子元素</h1>
    4     <span>第三个子元素</span>
    5     <span>第四个子元素</span>
    6 </div>

p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；

h1:first-of-type  匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；

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

:first-of-type  匹配到的是p元素

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

: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/Y1473/p/10260697.html

发表评论取消回复

表情：

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

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

相关阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 331 阅读

相关 css选择器与jquery选择器

[1.css选择器][1.css] [2.jquery选择器][2.jquery] [1.css]: http://www.w3school.com.cn/cssref/

古城微笑少年丶/ 2022年09月24日 09:30/ 0 赞/ 204 阅读

相关 css选择器“+”和“~”的区别

最大的区别是’+’最多只能匹配到一个元素，而’~’可以匹配到多个。 ‘+’是指紧跟在后面的某同级元素 ‘~’是指某些同级元素以以下代码为例 <div c

绝地灬酷狼/ 2022年07月26日 00:12/ 0 赞/ 232 阅读

相关 CSS选择器中后代选择器和派生选择器有什么区别？

根据W3C的说明：派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上

绝地灬酷狼/ 2022年06月10日 14:00/ 0 赞/ 260 阅读

相关 css选择器class与id的区别

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 1. id属性，只能被一个元素调用（以“\”选择符命名CSS样式在一个页

Love The Way You Lie/ 2022年06月07日 14:17/ 0 赞/ 245 阅读

相关 CSS的子选择器与后代选择的区别

一、子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。这行代码会使class名为food下的子元素li（水果、蔬菜）加

川长思鸟来/ 2022年05月27日 05:45/ 0 赞/ 254 阅读

相关 CSS属性选择器=，|=，^=,$=,=的区别

要求value是完整单词类型的比较符号：~=,|= 拼接字符串类型的比较符号：\=,^=,$= 1.attribute属性中包含value:　 [\[attrib

￡神魔★判官ぃ/ 2022年05月21日 08:56/ 0 赞/ 270 阅读

相关 CSS的后代选择器和子代选择器的区别

1.后代选择器：写法：$(“ancestor descendant” ，标签之间用空格隔开例在的代码中写： <div> <p> <span>

桃扇骨/ 2022年03月14日 11:50/ 0 赞/ 265 阅读

相关类选择器与元素选择器的区别

类选择器：类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。元素选择器：元素选择器是最常见的 CSS 选择器，即，

Dear 丶/ 2022年02月25日 07:28/ 0 赞/ 310 阅读

相关 css选择器中:first-child与:first-of-type的区别

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

「爱情、让人受尽委屈。」/ 2021年09月20日 07:26/ 0 赞/ 140 阅读