如何用css选择器选中最后一个段落_技术学堂

如何用css选择器选中最后一个段落

发布时间：2025-10-13 13:40

发布者：网络

浏览次数：

选中最后一个段落应使用p:last-of-type选择器，它能精准定位同类型元素中的末尾标签，即使其后存在其他类型标签，如示例中“第三段”仍被正确选中并应用样式。

如何用css选择器选中最后一个段落

要选中最后一个段落，可以使用CSS的 :last-of-type 伪类选择器。这个选择器能匹配同类型元素中的最后一个。

如果你的段落是用 <p></p> 标签写的，可以直接这样写：

p:last-of-type {
color: red;
}

这段CSS会选中其父容器内最后一个 <p></p> 元素，并将文字颜色变为红色。

确保理解以下几点，避免误选：

:last-of-type 是按元素类型找最后一个，不是整个文档的最后一个段落。如果后面还有其他类型的标签（比如 <div> 或 <code><h2></h2>），只要没有其他 <p></p>，它仍会选中最末尾的那个 <p></p>。
如果想选中某个容器里的最后一个子元素且它是段落，也可以结合 :last-child，但前提是它确实是最后一个子元素。
若只是想选中页面上唯一的或特定区域的最后一个 <p></p>，推荐使用 p:last-of-type 更稳妥。

第一段

第二段

第三段

其他内容

用 p:last-of-type 会选中“第三段”，即使后面有个 ，因为它仍是最后一个 <p></p>。基本上就这些，不复杂但容易忽略细节。

以上就是如何用css选择器选中最后一个段落的详细内容，更多请关注其它相关文章！