css选择器:first-child和:first-of-type的差别

最新推荐文章于 2022-12-22 14:33:02 发布

chenwf293

最新推荐文章于 2022-12-22 14:33:02 发布

阅读量483

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_36338787/article/details/81665851

版权

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

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

<div>
    <p>我是p标签</p>
    <span>我是span标签</span>
    <a>我是a标签</span>
</div>

在这段代码中，如果使用p:first-child 和 p:first-of-type都能成功选择到p标签。

而如果选择span:first-of-type也可以获取到span标签，因为span标签是div中的span类型中的第一个标签。

span:first-child则无法选择到任何标签,因为span的父元素为div，div的第一个元素(first-child)是p标签而不是span标签

只有span标签为父元素的第一个标签才能选择到此标签。

同理a标签也是如此。

<style> 
p:first-of-type
{
background:#ff0000;
}
</style>
</head>

<body>

<h1>这是标题</h1>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

</body>

p标签的父元素是body，虽然第一个p标签并不是body的第一个子元素，但是第一段落的p标签是所有p标签中的第一个，第一个段落的的p标签会有背景颜色，而要是换成p:first-child则第一个p标签的背景颜色不生效。

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

chenwf293

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css选择器:first-child和:first-of-type的差别

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。&lt;div&gt; ...
复制链接

扫一扫