:first-of-type匹配同类型元素中第一个，无视非元素节点；作用域限于直接父级，不跨层级；IE8及以下不支持。
first-of-type匹配的是“同类型中第一个”，不是“所有子元素第一个”
很多人写 p:first-of-type 却发现没生效，回头检查 HTML 发现第一个子节点是 h2 或空格文本节点——这恰恰说明它工作正常。:first-of-type 根本不关心它在父容器里排第几，只看“所有 p 元素中，它是第几个出现的”。只要它是第一个 p，哪怕前面有 5 个 div、3 条注释和一堆换行，照样命中。
常见错误现象：
-
div:first-of-type在父容器里没样式？可能父容器第一个子节点是header，但只要它是第一个div，选择器就成立 - 写了
*:first-of-type，结果<script></script>和<meta>（如果误放在body内）也被加了样式——通配符太危险 - 用
span:first-of-type想选段落里第一个词，却没效果？因为span是内联元素，常被包裹在p里，它的父级是p，不是你认为的外层div
文本节点和注释节点完全不影响:first-of-type判断
:first-of-type 的匹配过程会跳过所有非元素节点：纯文本（哪怕只含空格或换行）、<!-- comment --> 都不参与“类型分组”。它只遍历元素节点，按标签名归类，再取每类的第一个。
比如这个结构：
立即学习“前端免费学习笔记（深入）”；
<div> <!-- intro --> \n <h2>标题</h2> <p>第一段</p> <p>第二段</p> </div>
其中 h2:first-of-type 和 p:first-of-type 都能正确命中——空白文本和注释被忽略，h2 是第一个 h2 类型，p 是第一个 p 类型。
对比之下：h2:first-child 在这里会失败，因为第一个子节点其实是文本节点（换行+空格），不是 h2。
嵌套结构中:first-of-type作用域仅限直接父级
每个 :first-of-type 只在自己的直接父元素范围内计算，不会跨层级穿透。这点容易被忽略，尤其在组件化或模板复用场景下。
例如：
<article>
<section>
<p>A</p>
</section>
<section>
<p>B</p>
</section>
</article>若写 article p:first-of-type，它匹配的是整个 article 下第一个 p（即 A）；但若写 section p:first-of-type，则每个 section 里的 p 都会被单独判断——A 和 B 都会命中。
关键点：
- 作用域由选择器中离元素最近的父级决定，不是最外层容器
- 不要假设“全局首个”，它永远是局部计算
- 在 CSS-in-JS 或 Shadow DOM 中，需确认样式作用域是否覆盖到目标父级
IE8 不支持:first-of-type，现代项目可直接放弃但要防构建工具回退
IE8 及更早版本完全不识别 :first-of-type，连带 :nth-of-type 等也无效。现在绝大多数项目已无需兼容，但上线前仍需确认两件事：
- 构建工具（如 Autoprefixer）是否误启了
browserslist中包含ie >= 8的配置，导致生成无意义的回退代码 - 若真要兜底，别用 CSS hack，改用 JS 补位或提前加 class（如服务端渲染时标记
first-p） -
p:first-child可作为有限替代：仅当首个子元素恰好就是你要的目标标签时才等效，否则逻辑不同
真正容易被忽略的是：即使你没写任何 IE 兼容代码，某些老旧脚手架模板仍默认保留 IE8 支持配置，悄悄把有效 CSS 编译成空规则——查 dist 目录生成的 CSS 就能验证。
