p:last-of-type是唯一可靠解法，它只统计同级p标签，完全忽略注释、文本节点、div等非p元素；而p:last-child要求目标必须是父容器最后一个子节点，HTML注释作为真实DOM节点会破坏匹配。
p:last-of-type 是唯一可靠解法，它只统计同级 p 标签，完全忽略注释、文本节点、div 或其他任何非 p 元素。
为什么 p:last-child 在注释存在时失效
:last-child 要求目标元素必须是父容器的**最后一个子节点**。HTML 注释（如 <!-- footer -->）是真实 DOM 节点，哪怕看不见，也会占据子节点位置。
常见失效结构：
<div> <p>第一段</p> <p>第二段</p> <!-- end of content --> </div>
此时 p:last-child 不匹配任何 p，因为最后一个子节点是注释节点，不是 p。
立即学习“前端免费学习笔记（深入）”；
p:last-of-type 怎么工作
它只在所有同级 p 元素中倒序计数，取第一个——也就是“最后一个 p”，不看它后面有没有东西。
- ✅ 匹配上面示例中的“第二段”
- ✅ 即使后面跟
<span>附注</span>或换行产生的空白文本节点，也照常生效 - ✅ 不受
class影响：p.highlight:last-of-type实际含义是 “带highlight类的p中最后一个”，若最后一个p没这个类，就不匹配
容易被忽略的层级陷阱
真正失效往往不是伪类问题，而是 DOM 嵌套不对：
- ❌ 错误结构：
<article><section><p>段落</p></section></article>→p的父级是section，不是article，所以article p:last-of-type不命中 - ✅ 正确写法：要么用
section p:last-of-type，要么把p提到article直接子级 - ⚠️ 验证方式：DevTools 中右键父容器 → “Edit as HTML”，直接看真实子节点构成
别指望它识别 class 组合逻辑；要选“带某个 class 的最后一个元素”，得靠 JS 或重构为更可控的结构。
