:nth-of-type(1) 与 :first-of-type 功能完全等价，现代浏览器对其做硬编码优化、共享同一实现路径；前者仅在 CSS-in-JS 或预处理器动态生成时有实用价值，语义和性能上均无优势。
为什么 :nth-of-type(1) 和 :first-of-type 实际等价
二者在功能上完全一致：都匹配父元素中**第一个同类型**的子元素。浏览器对 :nth-of-type(1) 的解析逻辑就是直接映射为 :first-of-type 的内部实现，不额外做循环计数或公式展开。
常见误解是认为 :nth-of-type(1) 会“先算公式再匹配”，其实现代浏览器（Chrome 80+、Firefox 75+、Safari 14+）已对 n = 1 做硬编码优化，和 :first-of-type 共享同一路径。
-
:first-of-type更语义清晰，直白表达意图 -
:nth-of-type(1)是冗余写法，仅在需要统一用nth-系列做动态生成（如 CSS-in-JS 模板）时才有存在价值 - 两者在 DevTools 中触发的重排/重绘行为、计算性能、渲染流水线位置完全相同
:nth-of-type(1) 在复杂选择器中可能意外失效
当与类名、属性选择器组合时，顺序和作用域容易出错。比如 .item:nth-of-type(1) 并不是“带 .item 类的第一个元素”，而是“父元素中第一个 .item 类的元素”——但前提是这个元素的标签名必须参与类型计数。
关键点在于：:nth-of-type 只对**同标签名**的兄弟元素计数。如果父容器里混着 <div class="item">、<code><span class="item"></span>、<p class="item"></p>，那么 .item:nth-of-type(1) 不会跨标签匹配，它只会在 div 中找第一个 div.item，在 span 中找第一个 span.item，互不影响。
立即学习“前端免费学习笔记（深入）”；
- 想选“第一个带
.item的任意元素”？该用:is(.item):first-of-type（需支持:is()）或改用 JS -
.item:first-of-type同样受限于标签类型，不是万能“首个类匹配” - 真正安全的通用方案仍是
.item:first-child（但要求它恰好是父元素第一个子节点）
兼容性差异几乎可以忽略，但有细微边界
:first-of-type 自 IE9 起支持，:nth-of-type(1) 依赖完整的 :nth-of-type 支持——IE9 同样支持，但 IE8 及更早版本两者均不支持。
真正要注意的是某些旧版 Android WebView（4.3 及更早）或 QtWebKit 引擎：它们对 :nth-of-type(an+b) 的公式解析有 bug，但对 :nth-of-type(1) 单独做了兼容补丁。不过这类环境如今占比极低，除非你明确要支持 2013 年前的移动设备，否则无需为此换用 :nth-of-type(1)。
- 如果你项目最低支持 Android 4.4+ 或 iOS 7+，两者兼容性无差别
- CSS 预处理器（如 Sass）里写
@for $i from 1 through 3 { p:nth-of-type(#{$i}) { ... } }是合理场景，此时用:nth-of-type(1)是自然延伸 - 不要为了“看起来更现代”而把
:first-of-type全局替换成:nth-of-type(1)—— 代码可读性会下降，且没收益
性能瓶颈从来不在选择器写法本身
真正拖慢样式计算的，是选择器引发的**回溯匹配深度**和**重排触发频率**，而不是 :first-of-type 多省了一个字符还是少算了一次 n=1。
例如：article > section > div > p:first-of-type 比 p:first-of-type 慢得多，因为前者强制浏览器逐层验证父级结构；而后者只要在每个 p 的父元素里查一次“是否首个 p”即可。
- 避免深层嵌套 +
:nth-of-type组合，尤其在频繁更新的 DOM 区域（如列表滚动） - 若元素数量极大（>1000 个同类型兄弟），
:nth-of-type(even)可能比:nth-child(even)略快（因跳过非目标类型节点），但(1)场景无差别 - 最常被忽略的性能杀手：用
:nth-of-type触发了 layout thrashing，比如在 JS 中反复读取offsetTop后又改样式
