:first-of-type更稳定可靠，它只匹配同类型元素中首个出现的，不依赖是否为父元素第一个子节点，能避开注释、空格、前置标签等dom结构陷阱。
:first-of-type 是解决“同类型中第一个”问题的可靠选择，比 :first-child 更稳定、更符合直觉。 它不依赖元素是否为父节点的第一个子节点，只看标签名在同类中的出现顺序——这点在真实 HTML（含注释、空格、混合标签）中尤为关键。
为什么 :first-of-type 能避开 DOM 结构陷阱
它在父元素所有子节点中扫描，收集所有同名标签（如 p、div、li），再取其中第一个。前面有没有 <!-- 注释 -->、<script></script>、换行文本节点，甚至 <h2></h2>，都不影响匹配。
-
p:first-of-type会命中<div> <h2>标题</h2> <p>正文</p> </div>中的<p></p>，而p:first-child失效 - 服务端渲染插入的隐藏
<div style="display:none"></div>不会干扰li:first-of-type - Live Server 自动注入的脚本标签也不会让
section:first-of-type失效
常见误用：组合选择器里的 class 位置很关键
写法不同，语义完全不同。重点看 class 是修饰“类型”还是限定“筛选范围”：
-
.card p:first-of-type→ 在每个.card内部，找第一个p（推荐，常用） -
p.special:first-of-type→ 找所有带special类的p，再取其中第一个（注意：不是“第一个p中带special的那个”） -
p:first-of-type.special语法错误，:first-of-type不能后置 class
和 :nth-of-type(1) 有区别吗？
没有行为差异：p:first-of-type 和 p:nth-of-type(1) 完全等价。但前者语义更清晰、书写更短，且可读性更强；后者在需要动态切换序号（比如 n=2）时才有扩展价值。
- 兼容性一致：IE9+ 支持两者，无需降级
- 性能无差别：现代浏览器对两者都做了优化
- 可维护性上，
:first-of-type更直观，不易被误读成“第 n 个”
真正容易被忽略的是：它完全不关心 class 或 id，只认标签名。如果你要选“第一个带 active 的 button”，就得用 JS 或加 wrapper class——button.active:first-of-type 不是你想的那个意思。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
