:first-of-type匹配父元素中同类型标签的第一个，而非DOM首个子元素；如父元素内有p、div、p，则首p匹配，次p不匹配，且忽略文本/注释节点。
为什么 :first-of-type 并不等于「第一个子元素」
它匹配的是其父元素中**同类型标签的第一个出现**，不是按 DOM 顺序排的第一项。比如父元素里先有 <p>、再有 <div>、又一个 <p>，那么第二个 <p> 不会匹配 :first-of-type，但第一个 <p> 会——即使它前面还有别的标签。
常见误用场景：想给列表第一个 <li> 加样式，却在父 <ul> 下写 li:first-of-type，结果发现没生效。原因可能是 <ul> 开头有注释、空格文本节点（虽然不影响渲染，但仍是子节点），或者混入了其他标签如 <span>。此时 :first-of-type 仍有效，但你得确认目标 <li> 确实是所有 <li> 中的第一个。
- 只看标签名，忽略 class、id、属性等其他条件
- 文本节点、注释节点、
<script>等不影响:first-of-type的计算 - 若父元素下没有该类型标签，选择器自然不匹配任何元素
:last-of-type 的行为与陷阱
:last-of-type 是对称逻辑：找父元素内**同类型标签的最后一个**。但它同样不关心是否“视觉上在末尾”或“DOM 中排最后”。例如：
<div> <p>第一段</p> <span>中间</span> <p>第二段</p> <p>第三段</p> </div>
其中第三个 <p> 会匹配 p:last-of-type，而第二个不会——哪怕它后面跟着 <span>。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 动态插入内容后，
:last-of-type可能意外切换目标（比如 JS 新增一个<p>，原来“最后一个”就失效了） - 和
:nth-last-of-type(1)功能等价，但后者更明确表达“倒数第一个”，可读性略高 - 不能跨层级匹配：子元素的
:last-of-type不会受孙元素影响
对比 :first-child / :last-child 的关键区别
这是最常混淆的点。:first-child 要求元素**必须是父元素的第一个子节点且类型不限**；而 :first-of-type 只要求它是该类型中的第一个，不管前面有没有别的标签。
示例：
<article> <h2>标题</h2> <p>正文第一段</p> <p>正文第二段</p> </article>
-
p:first-child→ 不匹配任何<p>（因为第一个子是<h2>） -
p:first-of-type→ 匹配第一个<p>（它是所有<p>中的第一个） -
p:last-of-type→ 匹配第二个<p>
所以当你真正想选“容器里第一个段落”，用 :first-of-type 更稳妥；想选“整个列表结构里的首个直接子项”，才用 :first-child。
实际项目中建议怎么选
多数情况下，:first-of-type 和 :last-of-type 更贴近语义意图：比如文章首段加缩进、表格最后一行设底边框、卡片列表最后一项去 margin。它们对 HTML 结构变化更宽容。
- 如果组件模板可能插入头部说明、工具栏等非主体标签，优先用
:first-of-type - 避免在需要精确位置控制的场景（如网格布局第 1/第 N 列）依赖这两个伪类
- IE9+ 支持良好，无需 Polyfill；但注意某些旧版安卓 WebView 对
:nth-of-type系列支持不稳定，:first-of-type相对更稳 - 调试时可用浏览器 DevTools 的「:hover 状态模拟」功能快速验证匹配结果
真正要注意的是父容器里是否混入了同名但不同用途的标签——比如用多个 <div> 做布局和内容，这时 div:last-of-type 可能选到意料之外的块。
