:first-child和:last-child不生效是因为它们只匹配父元素的第一个/最后一个子节点，不区分类型；若首个子节点是注释或空格文本，则li:first-child不触发。
为什么 :first-child 和 :last-child 有时不生效
因为它们只看 DOM 树中的兄弟节点顺序，不关心元素类型。比如 <ul></ul> 里混着 <li> 和注释、文本节点甚至 <div>，那第一个 <code><li> 很可能不是第一个子节点。
- 常见错误现象：
li:first-child { margin-top: 0; }没反应 —— 实际上第一个子节点是注释或空格文本节点 - 使用场景：清理列表项首尾多余边距，尤其在响应式布局中避免容器溢出
- 参数差异：无参数，纯伪类；但和
:first-of-type完全不同，后者按元素类型匹配 - 兼容性影响：IE9+ 支持，但 IE9 不支持多个伪类连用（如
li:first-child:last-child）
:first-child 和 :last-child 怎么安全用于列表边距控制
核心是确保目标元素确实是其父容器的「第一个/最后一个直接子元素」。最稳妥的做法是统一结构 + 配合其他选择器兜底。
- 实操建议：给列表加明确 wrapper，用
ul.list > li限定作用域，再叠加伪类 - 推荐写法：
ul.list > li { margin: 0.5rem 0; }<br>ul.list > li:first-child { margin-top: 0; }<br>ul.list > li:last-child { margin-bottom: 0; } - 性能影响：伪类本身无性能问题，但嵌套过深（如
div ul li:first-child）会拖慢 CSS 解析，建议层级 ≤ 3 - 注意点：若列表动态渲染（如 Vue/React），需确认首次渲染时 DOM 结构干净，避免服务端注入空文本节点
替代方案：什么时候该换用 :first-of-type 或 :nth-child()
当列表结构不可控，或需要更灵活的定位逻辑时，这两个更可靠。
-
:first-of-type看元素类型，不管中间有没有其他标签 —— 适合<ol></ol>里夹着<p></p>的文档流场景 -
:nth-child(1)和:first-child表现一致，但:nth-child(2n)能做奇偶控制，:nth-child(-n+3)可选前三个 - 容易踩的坑：
li:nth-child(1)≠ 第一个li，而是「第一个子节点且是li」，和:first-child本质一样；真要选第一个li，得用li:first-of-type - 兼容性提醒：
:nth-child()IE9+，但负号表达式（如-n+3）IE9 不支持，需单独处理
真实项目里最容易被忽略的细节
边距重置不是加个伪类就完事。父容器的 padding、子元素的 display 类型（比如 inline 元素对 margin-top/bottom 无效）、甚至 font-size: 0 导致的空白符塌陷，都会让伪类看起来“失效”。
立即学习“前端免费学习笔记（深入）”；
- 调试第一步：打开开发者工具，检查目标
li是否真是父节点的第一个子节点（看 Elements 面板的树形结构） - 别依赖视觉判断 —— 用
outline: 1px solid red临时标记，比靠眼睛数更准 - 如果用 Flex/Grid 布局，
:first-child依然有效，但边距控制往往不如gap直观，优先考虑现代布局方案
