p:first-of-type比p:first-child更适合首段样式，因其无视前面非p元素，只在同类型中找首个；需限定直接父级作用域，避免全局误选，并注意嵌套层级独立计数。
为什么 p:first-of-type 比 p:first-child 更适合首段样式
因为文章开头常有 h1、header 或空行文本节点，p:first-child 会直接失效；而 p:first-of-type 只看所有 p 元素中谁排第一，完全无视前面是什么。哪怕结构变成 <div>
<h2>导语</h2>
<p>正文开始</p>
</div>，它照样命中。
p:first-of-type 在嵌套容器里怎么写才生效
它只在**直接父元素**范围内计算，所以必须确保选择器路径指向正确的父级：
- 如果段落都在
<article></article>内，就用article p:first-of-type - 如果内容被包裹在
<section class="content"></section>里，就得写.content p:first-of-type - 别写成
body p:first-of-type——万一页面顶部有隐藏的p（比如 JS 注入的埋点），首段就失焦了
常见失效原因和对应检查项
遇到没加上的情况，优先排查这几条：
- 父容器下压根没有
p元素（比如用了div包文字，却写了p:first-of-type） - HTML 中存在未闭合标签或非法嵌套，导致浏览器解析出错，DOM 结构和预期不符
- 用了通配符写法如
*:first-of-type，结果<script></script>或<meta>（若误放 body 内）也被捕获，样式被意外覆盖 - IE8 及更早版本不支持——现代项目可忽略，但若构建流程启用了老旧 Autoprefixer 配置，可能悄悄生成了无效回退规则
配合其他选择器提升精度的写法
单纯 p:first-of-type 容易误中全局首个 p，实际项目中建议限定作用域：
- 给文章区域加个 class：
<article class="post">...</article>，然后写.post p:first-of-type - 需要跳过摘要段落？可用组合否定：
.post > p:not(.summary):first-of-type - 想同时处理首段和首列表，分开写更安全：
.post p:first-of-type, .post ul:first-of-type，别偷懒合并成.post *:first-of-type
真正容易被忽略的是嵌套层级——:first-of-type 不会穿透父级，每个容器都重新计数。如果你在组件化模板里复用同一段 CSS，得确认它的父元素是否始终一致，否则看似相同的代码，在不同上下文中可能选中完全不同的元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
