:first-of-type才是定位首段的可靠选择，它按元素类型计数，无视其他兄弟节点，兼容IE9+，语义清晰且不易受空白文本、注释或隐藏元素干扰。
直接用 :first-child 很可能不生效——它选的是父容器里的第一个子元素，而段落前常有
、
或空白文本节点。
为什么
真正可靠的写法：用
为什么 :first-child 对
失效
这个选择器只关心“是不是父元素的第一个直接子节点”，不关心标签类型。比如：
标题
这是第一段
这是第二段
立即学习“前端免费学习笔记（深入）”；
此时
是第二个子元素，article > p:first-child 完全匹配不到。
-
:first-child要求目标元素必须是父元素的首个子节点 - 哪怕前面只有空格或换行（文本节点），也会导致匹配失败
- 它和语义上的“第一个段落”不是一回事
真正可靠的写法：用 :first-of-type
它按元素类型计数，只找同类型中的第一个，无视其他兄弟节点：
p:first-of-type { font-size: 1.2em; font-weight: bold; margin-top: 0; }上面规则会命中
中第一个
，不管前面有没有
、
或注释。
- 兼容性好（IE9+ 支持）
- 语义清晰：就是“第一个段落”，不是“第一个孩子”
- 不会被隐藏元素、注释或空白文本干扰
更精确的控制：配合类名或结构限定
如果页面中多个区域都有首段需要样式，但只希望作用于某一块，建议加一层限定：
article > p:first-of-type { color: #2c3e50; } .entry-content > p:first-of-type { text-indent: 0; }避免全局污染，也防止意外匹配到侧边栏、页脚等位置的
。
- 别单独写
p:first-of-type（太宽泛） - 优先用容器 class 或语义化标签（如
main、section）限制范围 - 如果首段需要特殊缩进，记得重置
text-indent或margin，因为默认段落样式可能已存在
真正要注意的是：css 里没有“文档中第一个
”这种全局选择器，所有伪类都只在父级作用域内计算。所以定位首段，本质是选对父容器 + 用对伪类 —— :first-of-type 才是那个靠谱的选择。