根本原因是li:first-child要求目标元素必须是父元素的第一个子节点，若前面存在注释、空格文本节点或其他标签（如），则匹配失败；ul > li:first-child更精准，只匹配ul的直接子li，避免嵌套干扰。
为什么 li:first-child 有时不生效
根本原因不是选择器写错了，而是 HTML 结构没满足「第一个子元素必须是 li」这个硬条件。比如父容器开头有个注释、空格文本节点、<div> 或 <code><h3></h3>，那 li:first-child 就完全匹配不到——它只认 DOM 树里真正排第一的子节点。
常见陷阱：
-
<ul> <!-- 注释 --><li>A</li> </ul>→ 不生效（注释是第一个子节点） -
<ul> <div class="header"></div> <li>A</li> </ul>→ 不生效（div是第一个） -
<ul> <li>A</li> <li>B</li> </ul>→ 生效（li确实是第一个）
ul li:first-child 和 ul > li:first-child 有区别吗
有，而且影响匹配精度。前者是后代选择器，会匹配任意嵌套层级的 li；后者是子选择器，只匹配 ul 的直接子 li。
实际影响：
- 如果列表里有嵌套
ul，ul li:first-child可能误中内层列表的首项 -
ul > li:first-child更安全，尤其在 CMS 输出或用户生成内容中 - 多数场景推荐用
ul > li:first-child，避免意外交互
想给首项加边框但去掉顶部边距，怎么写才不冲突
别直接写 margin-top: 0，因为浏览器默认样式或重置 CSS 可能已设了 margin，而 border 和 margin 属于不同盒模型属性，需分开控制。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
稳妥写法：
- 先统一所有
li的margin：ul > li { margin-top: 12px; } - 再单独重置首项：
ul > li:first-child { margin-top: 0; border-top: 2px solid #333; } - 注意顺序：重置规则必须在通用规则之后，否则被覆盖
首项样式和响应式断点一起用时要注意什么
伪类选择器本身不触发媒体查询重计算，但样式叠加容易出问题。比如移动端希望首项无边框，桌面端才有——不能只靠 @media 覆盖 border，因为 margin-top: 0 还在生效，会导致视觉错位。
建议做法：
- 把首项所有相关样式打包进同一规则块，方便整体开关：
ul > li:first-child { margin-top: 0; border-top: 2px solid #333; } - 在媒体查询里整块禁用：
@media (max-width: 768px) { ul > li:first-child { margin-top: 12px; border-top: none; } } - 避免拆成多个独立声明，否则维护成本高、易漏掉某一项
真正容易被忽略的是：伪类匹配发生在 DOM 解析阶段，不随 JS 动态插入或 class 切换而重新评估——除非你手动触发重排或替换整个父容器。所以用 first-child 做样式隔离时，结构稳定性比选择器技巧更重要。
