:first-child和:last-child在flex容器中可能失效，主因是display值干扰子元素判定、display:contents透出破坏层级、flex-direction反向或IE11对注释/伪元素敏感；推荐用:not(:last-child)控制间距、gap替代首尾margin、@supports检测gap兼容性。
first-child和last-child选不中首尾元素？检查父容器display
弹性布局下:first-child和:last-child失效，大概率不是选择器写错了，而是父元素的display值干扰了“子元素”的判定逻辑。Flex容器里，只有真正作为直接子节点的元素才参与:first-child匹配；但若中间夹了display: contents元素、或用了flex-wrap: wrap后视觉首尾和DOM顺序错位，也会看起来“没生效”。
实操建议：
- 用浏览器开发者工具确认目标元素在DOM树中是否真是父容器的第一个/最后一个子节点
- 避免在弹性容器内嵌套
display: contents包装层——它会让子元素“透出”，但破坏:first-child的层级关系 - 如果用
flex-direction: column-reverse，注意:first-child仍按HTML顺序匹配，不是视觉顶部那个 - 测试时临时加
outline: 1px solid red到*:first-child，看实际高亮的是谁
想给首尾item加不同边框？别只靠border-left/right
常见错误是给所有item统一设border-right: 1px solid #ccc，再用:last-child { border-right: none }去删——这在flex换行后会出问题：最后一行末尾item未必是DOM里的:last-child，导致多余边框残留。
更稳的做法是反向控制：
- 默认不设右侧边框，只给
:not(:last-child)加margin-right或padding-right模拟间隔 - 若必须用边框，改用
border-inline-end（兼容现代浏览器），配合direction: ltr确保方向稳定 - 水平flex布局中，首尾特殊样式优先用
margin而非border，减少重绘干扰 - 遇到多行flex（
flex-wrap: wrap），:first-child/:last-child无法定位每行首尾，此时得用JavaScript或CSS容器查询（Container Queries）辅助
IE11里:first-child不生效？查伪元素和注释干扰
IE11对:first-child的解析比现代浏览器严格：HTML注释、空文本节点、甚至某些自闭合标签后的换行，都可能被识别为“第一个子节点”，导致真实目标元素变成第二个子节点而失配。
排查与修复：
- 打开IE11开发者工具，在“DOM Explorer”里手动折叠父容器，看第一个展开项是不是你预期的元素
- 删掉模板中父容器开头的HTML注释（如
）和无意义换行 - 避免在flex容器内使用
::before/::after伪元素——IE11会把它们计入子元素计数 - 兼容方案：用
.list > div:first-of-type替代:first-child，前提是首尾元素标签名一致且可控
用flex-gap时还加:first-child/:last-child？多数时候没必要
gap属性已原生处理了首尾间距问题：它只在相邻flex item之间生效，不会在容器边缘产生额外空白。这时候再用:first-child { margin-left: 0 }或:last-child { margin-right: 0 }反而容易覆盖默认行为，尤其在响应式断点切换flex-direction时引发错位。
什么情况仍需首尾控制：
- 需要首尾有不同于中间的背景色、阴影或圆角（
border-radius） - gap值为0，但靠
margin实现间距，此时首尾margin必须归零 - 容器本身有
padding，而你希望首尾item贴边——这时:first-child可用来抵消padding影响 - 使用
justify-content: space-between时，首尾item自动撑满，:first-child/:last-child对齐控制就完全失效了
真正麻烦的是跨浏览器gap支持：Safari 14.1+才支持flex gap，旧版必须回退到margin + :first-child/:last-child组合。这时候得用@supports (gap: 0)做条件覆盖，而不是无脑叠加规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
