重学last-of-type

最新推荐文章于 2024-03-05 16:08:54 发布

supming1

最新推荐文章于 2024-03-05 16:08:54 发布

阅读量220

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/supming1/article/details/105513198

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一直以为last-of-type是找某个类型的最后一个节点，一直以为css类也是支持的。今天遇到类似下面结构，写成 .p:last-of-type 找不到最后一个p，写成 p:last-of-type 就能正确找到。查了下资料，选择器先根据.p 找到对应的元素，然后根据对应元素的标签（p）开始找同类型（p）的兄弟节点，如果这个元素是兄弟中的最后一个，那成立，否则不成立。如下结构，找到的是内容为“这是第三个段落。”的p元素，它后面还有一个p元素，所以不成立。

<!DOCTYPE html>
<html>
<head>
<style> 
	.p:last-of-type{background:#ff0000;}
</style>
</head>

<body class="body">

	<div class="list">
		<h1>这是标题</h1>
		<p class="p">这是第一个段落。</p>
		<p class="p">这是第二个段落。</p>
        <!--这个不是最后元素，所以不成立-->
		<p class="p">这是第三个段落。</p>
		<p>这是第四个段落。</p>
		<div>11</div>
	</div>

</body>
</html>