p:first-child失效是因为它要求p必须是父元素的第一个直接子节点，而HTML注释、换行符等生成的#text节点会让p失去该位置；应改用p:first-of-type，它按标签名分组选取首个p元素。
为什么 p:first-child 有时根本不起作用
不是选择器写错了，而是 DOM 里“第一个子节点”根本不是 p。HTML 注释、换行符、空格缩进产生的文本节点（#text），甚至前面的 <h2></h2> 或 <div>，都会让 <code>p 失去“第一个子元素”的身份。
打开浏览器开发者工具，展开父元素，直接看子节点列表：如果第一个图标是 #text 或 <!-- -->，那 p:first-child 就注定失效。
-
p:first-child要求该p必须是父元素的**第一个直接子节点**，且标签名完全匹配 - 哪怕结构是
<div>\n <p>内容</p>\n</div>，那个换行符也会生成一个#text节点，p变成第二个子节点 - 它不关心“这是不是第一个
p”，只认位置——前面有别的东西，就出局
p:first-of-type 才是你想找的“第一个指定元素”
如果你要选中“父元素下第一个 p”，不管它前面有没有标题、注释或空白，p:first-of-type 是正确解法。它按标签名分组，在所有 p 元素中取第一个出现的。
示例结构：<article><h2>标题</h2><p>首段</p><p>次段</p></article>
立即学习“前端免费学习笔记（深入）”；
-
article p:first-child→ 不匹配（第一个子节点是h2） -
article p:first-of-type→ 匹配第一个p（即“首段”） - 注意作用域：
article > p:first-of-type只匹配article的**直接子p**；article p:first-of-type会匹配任意嵌套深度的首个p，需谨慎
别用 *:first-of-type，它会失控
*:first-of-type 看似“选所有类型里的第一个”，实际非常危险：它会把 <meta>、<script>、<svg>、甚至误放在 <body> 里的 <link> 全部命中，样式污染极难排查。
- 永远明确写出标签名，比如
p:first-of-type、li:first-of-type - 若需更稳，加 class 限定：
.content p:first-of-type或p.lead:first-of-type -
:first-of-type的“类型”只认标签名，完全忽略class、id、属性——p.red:first-of-type和p:first-of-type在同一父级下效果相同
IE8 及以下不支持 :first-of-type
如果你的项目仍需兼容 IE8，:first-of-type 会直接被忽略，样式丢失。这不是 bug，是原生不支持。
- Autoprefixer 默认不为
:first-of-type生成回退代码，别指望它帮你兜底 - 真要兼容，得用 JS 补充（如给首个
p加 class），或改用结构约束更强的方案（如固定 class 名 +.first-paragraph） - 现代项目中，优先用
:first-of-type；只有明确要支持 IE8 时，才需要绕开它
真正选中“第一个指定元素”的关键，从来不是背规则，而是打开 DevTools 看一眼父元素下的真实子节点顺序——文本节点和注释比你想象中更常挡路。
