• 只看标签名，忽略 class、id、属性等其他条件
• 文本节点、注释节点、 等不影响 :first-of-type 的计算
• 若父元素下没有该类型标签，选择器自然不匹配任何元素

:last-of-type 的行为与陷阱

:last-of-type 是对称逻辑：找父元素内**同类型标签的最后一个**。但它同样不关心是否“视觉上在末尾”或“DOM 中排最后”。例如：

  
第一段
  中间
  
第二段
  
第三段

其中第三个

容易踩的坑：

• 动态插入内容后，: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
• 避免在需要精确位置控制的场景（如网格布局第 1/第 N 列）依赖这两个伪类
• IE9+ 支持良好，无需 Polyfill；但注意某些旧版安卓 WebView 对 :nth-of-type 系列支持不稳定，:first-of-type 相对更稳
• 调试时可用浏览器 DevTools 的「:hover 状态模拟」功能快速验证匹配结果

真正要注意的是父容器里是否混入了同名但不同用途的标签——比如用多个 做布局和内容，这时 div:last-of-type 可能选到意料之外的块。