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

omgdog 发布于2019-04-23 11:54 / 826人阅读

摘要：选择器是中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。这里有两个为的子元素，匹配到的是第一个。同样类型的选择器和和也可以这样去理解。文章乃参考转载其他博客所得，仅供自己学习作笔记使用

: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) 也可以这样去理解。

文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！

服务器托管 idc机房托管 css与html的区别 html与css的区别 html与css区别 js选择器中+

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1337.html

CSS选择器

###CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ CSS3选择最新选择器规范: https://www.w3.org/TR/selectors !---问题---! 　　1.css的全称是什么？　　　　Cascading style sheets 　　2.样式表的组成...

Bryan 2019-04-23 13:13 评论0 收藏0
CSS节选——选择器

摘要：，，层叠样式表，请留意层叠概念。为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类。常见伪元素。和伪元素的用法和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。CSS，cascading style sheet，层叠样式表，请留意层叠概念。 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:targ...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
伪类和伪元素的区别

摘要：伪元素用于将特殊的效果添加到某些选择器。因此，伪类与伪元素的区别在于有没有创建一个文档树之外的元素。伪类代表了一组兄弟元素中的第一个元素。伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。在css2中是这样定义二者的： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不...

starsfun 2019-08-29 15:09 评论0 收藏0
我终于理解了伪类和伪元素

摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...

张迁 2019-08-30 14:05 评论0 收藏0
CSS3主要内容

摘要：必须要准确的放置否则声明无效。倒影设置元素的倒影准确的来说不能算是的东西，但需要知道。默认值不可继承背景渐变渐变是在中新增加的图片类型使用渐变可以在两种颜色间制造出平滑的渐变效果用它代替图片，可以加快页面的载入时间减小带宽占用。 CSS3主要内容一、CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/RE... ...

X_AirDu 2019-08-30 11:15 评论0 收藏0