ul li:first-child未生效是因为:first-child要求目标元素必须是父元素的第一个子节点且标签名完全匹配，而注释、换行符或前置其他元素会使其失效；应改用:first-of-type或检查childnodes确认真实dom结构。
ul li:first-child 没生效？不是选择器写错了，而是它根本没匹配到——:first-child 要求目标元素**必须是父元素的第一个子节点**，且类型要和前面的选择器完全一致。结构稍有偏差，样式就彻底失效。
为什么 ul li:first-child 常常不生效
常见错误现象：明明 HTML 里第一个子元素是 <li>，但样式就是不应用。
- 父元素开头有注释（
<!-- 导航 -->），它成了第一个子节点，<li>变成第二个 - 模板渲染或代码格式化后，
<ul>\n <li> </ul>中的换行符被解析为文本节点，占据第一个位置 - 父容器里混着其他标签，比如
<div class="header"></div> <li>首页</li>，此时<li>是第二个子节点 - 写了
li.special:first-child，但伪类不能和类名组合来“限定某种类的第一个”，它只认 DOM 位置 + 标签名
:first-of-type 更适合选“第一个同类型元素”
当父元素结构不可控（比如 CMS 输出、组件嵌套、多类型子元素共存），:first-of-type 是更鲁棒的选择。
-
ul li:first-of-type会选中<ul></ul>下第一个出现的<li>，不管前面有没有<div>、注释或空格<li>它只看标签名，不看类名或属性，所以 <code>li.active:first-of-type无效，得写成li:first-of-type.active（先定位再过滤） - IE9+ 支持，若需兼容 IE8 及更早版本，必须退回到手动加
class="first" - 注意：它不解决“视觉首项”问题——Flex 的
order: -1或 Grid 的grid-template-areas改变的是渲染顺序，:first-of-type仍按源码顺序匹配
调试时先确认真实 DOM 结构
别猜，直接查。在浏览器开发者工具中右键第一个 <li> → “检查”，然后在 Console 输入：
$0.parentNode.childNodes
你会看到一个 NodeList，里面包含所有子节点：Element、Text、Comment……真正起作用的 :first-child 必须对应索引 [0] 且是 Element 类型、标签名匹配。
- 如果
[0]是#text，说明有空白或换行；[0]是#comment，说明有注释 - 用
ul > li:first-child替代ul li:first-child可避免意外命中嵌套<li>内的子<li> - 想彻底绕过结构干扰？JS 动态加 class：
document.querySelector('ul').children[0]?.classList.add('first')，但应作为兜底方案，非首选
真正麻烦的从来不是写法，而是你看到的 HTML 和浏览器实际解析出的 DOM 并不总是一回事。每次 :first-child 失效，优先打开 childNodes 看一眼——那才是它真正认的“第一个”。
