:first-of-type匹配父元素中同类型标签的第一个，而非DOM首个子元素；如父元素内有p、div、p，则首p匹配，次p不匹配，且忽略文本/注释节点。
为什么 :first-of-type 并不等于「第一个子元素」
它匹配的是其父元素中**同类型标签的第一个出现**，不是按 DOM 顺序排的第一项。比如父元素里先有 常见误用场景：想给列表第一个 其中第三个 容易踩的坑： 这是最常混淆的点。 示例： 正文第一段 正文第二段 所以当你真正想选“容器里第一个段落”，用 多数情况下， 真正要注意的是父容器里是否混入了同名但不同用途的标签——比如用多个 ，那么第二个 不会匹配 :first-of-type，但第一个 会——即使它前面还有别的标签。
加样式，却在父 li:first-of-type，结果发现没生效。原因可能是 。此时 :first-of-type 仍有效，但你得确认目标 确实是所有 中的第一个。
等不影响 :first-of-type 的计算
:last-of-type 的行为与陷阱:last-of-type 是对称逻辑：找父元素内**同类型标签的最后一个**。但它同样不关心是否“视觉上在末尾”或“DOM 中排最后”。例如：
会匹配 p:last-of-type，而第二个不会——哪怕它后面跟着 。
:last-of-type 可能意外切换目标（比如 JS 新增一个 ，原来“最后一个”就失效了）:nth-last-of-type(1) 功能等价，但后者更明确表达“倒数第一个”，可读性略高:last-of-type 不会受孙元素影响对比
:first-child / :last-child 的关键区别
:first-child 要求元素**必须是父元素的第一个子节点且类型不限**；而 :first-of-type 只要求它是该类型中的第一个，不管前面有没有别的标签。标题
p:first-child → 不匹配任何 （因为第一个子是 ）p:first-of-type → 匹配第一个 （它是所有 中的第一个）p:last-of-type → 匹配第二个
:first-of-type 更稳妥；想选“整个列表结构里的首个直接子项”，才用 :first-child。实际项目中建议怎么选
:first-of-type 和 :last-of-type 更贴近语义意图：比如文章首段加缩进、表格最后一行设底边框、卡片列表最后一项去 margin。它们对 HTML 结构变化更宽容。
:first-of-type
:nth-of-type 系列支持不稳定，:first-of-type 相对更稳div:last-of-type 可能选到意料之外的块。
