:first-child和:last-child常失效是因为它们只认同级中首个/末个子元素，不区分类型；混入注释、文本节点或display:none元素会干扰序号计算；更稳方案是:first-of-type/:last-of-type，按标签名分组计数。
first-child 和 last-child 为什么经常失效
因为它们只认「同级中第一个/最后一个」，不看元素类型。比如 <div>
<p>A</p>
<span>B</span><p>C</p>
</div> 里，p:first-child 不会匹配 A——因为 A 前面没兄弟，但它的父容器第一个子元素确实是 p；而 p:last-child 也不会匹配 C，因为 C 后面还有 span？不对，C 是最后一个子元素吗？不是，span 在中间，C 是第三个子元素，后面没兄弟，所以 C 是 :last-child。但如果你写的是 p:last-child，它要求目标既是 p 又是最后一个子元素——这个条件成立，C 就能命中。真正容易翻车的是：父容器里混了注释、文本节点、或 display: none 元素，它们也算子节点，会干扰序号计算。
- 用浏览器开发者工具的「Elements」面板右键检查元素，选「Force state」→
:first-child看是否高亮，比猜靠谱 - 如果列表项由 JS 动态插入，确保插入时 DOM 结构干净（别带空格文本节点）
- 服务端渲染或模板引擎（如 Vue/JSX）可能注入注释，导致
:first-child错位
更稳的替代方案：first-of-type / last-of-type
当你要选「同类元素里的第一个/最后一个」，而不是「所有子元素里的第一个/最后一个」，就该换用 :first-of-type 和 :last-of-type。它们按标签名分组计数，无视其他类型节点干扰。
-
li:first-of-type能稳稳选中列表里第一个li，哪怕前面有div或注释 - 但注意：它不区分 class 或属性，
button.btn:first-of-type和button:disabled:first-of-type都无效——伪类不支持属性筛选 - 性能上几乎无差别，现代浏览器都优化过了，不用犹豫
/* 比如给卡片列表首尾加圆角 */
.card-list > .card:first-of-type {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.card-list > .card:last-of-type {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}Flex/Grid 容器下直接用 justify-content + padding 更省事
如果容器是 display: flex 或 grid，且子项等宽、间距固定，其实没必要靠伪类——用间隙控制+内边距更直观、更可控。
立即学习“前端免费学习笔记（深入）”；
- Flex 下：
gap: 12px配合padding: 0 12px，让首尾项视觉上「缩进」，自然露出圆角 - Grid 下：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))加gap，再给容器设padding，效果更一致 - 这种方式绕开了 DOM 结构依赖，响应式断点切换时也不用重写选择器
border-radius 在 overflow: hidden 容器里被裁切怎么办
当给子元素设了 border-radius，但父容器有 overflow: hidden，圆角常被意外裁掉——不是样式没生效，是渲染层裁剪优先级更高。
- 确认父容器是否真需要
overflow: hidden；如果只为清除浮动，改用display: flow-root - 如果必须保留
overflow: hidden，就把圆角移到父容器上（比如卡片组件自身设border-radius，内容区用padding避开边缘） - 绝对定位元素（如 badge）超出圆角区域时，也会被裁，此时需配合
z-index和父容器position: relative
实际项目里，:first-of-type/:last-of-type 覆盖 80% 场景；剩下那些要和 JS 交互、或结构高度动态的，优先考虑 Flex/Gap 方案。伪类看着简洁，但 DOM 变动一多，调试成本反而更高。
