:first-of-type才是定位首段的可靠选择,它按元素类型计数,无视其他兄弟节点,兼容IE9+,语义清晰且不易受空白文本、注释或隐藏元素干扰。

直接用 这个选择器只关心“是不是父元素的第一个直接子节点”,不关心标签类型。比如: 这是第一段 这是第二段 立即学习“前端免费学习笔记(深入)”; 此时 它按元素类型计数,只找同类型中的第一个,无视其他兄弟节点: 上面规则会命中 如果页面中多个区域都有首段需要样式,但只希望作用于某一块,建议加一层限定: 避免全局污染,也防止意外匹配到侧边栏、页脚等位置的 真正要注意的是:CSS 里没有“文档中第一个 :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;
}
中第一个 ,不管前面有没有 、
更精确的控制:配合类名或结构限定
article > p:first-of-type {
color: #2c3e50;
}
.entry-content > p:first-of-type {
text-indent: 0;
}
。
p:first-of-type(太宽泛)main、section)限制范围text-indent 或 margin,因为默认段落样式可能已存在”这种全局选择器,所有伪类都只在父级作用域内计算。所以定位首段,本质是选对父容器 + 用对伪类 —— :first-of-type 才是那个靠谱的选择。










