css中:last-child和:last-of-type两种伪类的区别

最新推荐文章于 2023-01-31 14:18:57 发布

武林盟主～

最新推荐文章于 2023-01-31 14:18:57 发布

阅读量478

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_36881924/article/details/105011236

版权

3 篇文章 0 订阅

订阅专栏

(1)p:last-child:指定元素的父元素中最后一个元素,如何父元素中的最后一个元素不是则匹配失败，没有效果。

p:last-child
{
background:#ff0000;
}

<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
	<span>干扰项</span>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>

则是匹配到“The fourth paragraph“这句。
注：使用nth-last-child属性时，如果是nth-last-child(3)匹配到标签元素，由于不是

元素则style样式不起作用。
(2)p:last-of-type: 指定元素的父元素中最后一个元素,如何父元素中的最后一个元素不是则会去匹配父元素中的最后一个元素。

p:last-of-type
{
background:#ff0000;
}

<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
	<span>干扰项</span>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>

如图属性p:last-of-type也会匹配到最后一个标签，但是当使用nth-last-of-type时，则会把不是标签的直接略过。所以p:nth-last -of-type(3)对应的是The second paragraph.

关注