:first-child和:last-child失效的根本原因是它们严格匹配同级中第一个/最后一个子元素，不忽略注释、空格文本节点或非目标标签；若结构含干扰节点或非直接子元素，则选择失败。
为什么 :first-child 和 :last-child 经常失效？
根本原因不是选择器写错了，而是它们只认“同级中的第一个/最后一个元素”，不看语义。比如列表里混着 <li> 和注释、空格文本节点，或前面有 <div> 标题，<li> 就不再是第一个子元素。
实操建议：
- 确保目标元素是父容器的**直接子元素**且无其他同级兄弟节点干扰
- 用浏览器开发者工具检查元素实际 DOM 结构，右键「Reveal in Elements Panel」确认层级
- 若结构复杂（如 Vue/React 渲染后插入了注释节点），改用
:first-of-type或:nth-child(1)更稳妥
圆角只加在首尾项：避免全列表统一圆角的常见错误
很多人直接给 ul 加 border-radius，结果整个容器变圆角，但内部 li 依然直角拼接，视觉割裂。真正要的是每个 li 自己的上下边框圆角。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 先清除所有
li的默认圆角：border-radius: 0 - 再单独给首项加
border-top-left-radius和border-top-right-radius - 给末项加
border-bottom-left-radius和border-bottom-right-radius - 如果列表带边框，记得同时处理
border-top/border-bottom避免圆角处露白边
示例：
li {
border-radius: 0;
}
li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top: 1px solid #e0e0e0;
}
li:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom: 1px solid #e0e0e0;
}
当列表动态增删时，:last-child 不更新怎么办？
纯 CSS 无法感知 JS 动态插入或删除节点后的 DOM 变化——但其实它会自动响应。问题往往出在操作方式上：比如用 innerHTML += 替换整个列表，导致所有节点被重建，此时 :last-child 会重新计算；但如果只是 appendChild() 新增一个 li，它天然就是新的 :last-child。
容易踩的坑：
- 用
document.write()或反复重写innerHTML—— 这会让所有旧节点消失，新节点重建，触发重绘但逻辑正确；但性能差且可能丢失事件绑定 - 误以为需要手动切换 class 类名来模拟
:last-child—— 完全没必要，CSS 原生支持 - 在 Vue/React 中用
v-for或map()渲染时，确保 key 唯一且稳定，否则框架可能复用旧节点，导致视觉顺序与 DOM 顺序不一致
移动端适配和多层嵌套列表的圆角冲突
嵌套列表（如二级菜单）中，外层 ul 的 :last-child li 和内层 ul 的 :last-child 会互相干扰。更麻烦的是 iOS Safari 对 border-radius + overflow: hidden 的渲染 bug：圆角区域可能裁剪掉子元素的阴影或边框。
解决方案：
- 用属性选择器限定作用范围：
ul.menu > li:first-child避免穿透到子列表 - 对嵌套列表单独定义规则，例如
ul ul li:first-child和ul ul li:last-child - 在圆角容器上慎用
overflow: hidden；如需遮罩，改用clip-path: inset(0 0 0 0 round 8px)兼容性更好 - 测试真机，特别是 iOS 15+，部分圆角组合在 Retina 屏下会出现 1px 模糊或锯齿
圆角值本身别硬写 px，用 rem 或 em 更利于缩放；但注意 Safari 对小数值（如 0.125rem）的渲染精度不稳定，建议最小用 0.1875rem（3px）起。
