:first-child:last-child仅匹配父容器中唯一子元素；需差异化处理首尾时应分开使用，避免混淆:first-of-type；注释等节点会影响匹配，布局间距控制是其典型用途。
为什么 :first-child 和 :last-child 不能直接“组合”写成 :first-child:last-child
这种写法语法合法，但实际生效条件极苛刻：只有当该元素**既是第一个子元素，又是最后一个子元素**时才匹配——也就是父容器里**只有一个子元素**。这不是“结合使用”的本意，而是意外重叠的边界情况。
真正需要的是对首尾元素做差异化样式处理，比如给列表首尾加不同边框、调整间距或隐藏某侧装饰线。
-
:first-child匹配父元素下位置为 1 的子元素（不关心类型） -
:last-child匹配父元素下位置为n的子元素（同样不关心类型） - 二者独立应用，互不影响；不存在“优先级覆盖”或“链式过滤”
常见误用：混淆 :first-child 与 :first-of-type
如果父容器中混有其他类型节点（比如 例如： 立即学习“前端免费学习笔记（深入）”； 此时 这是最典型的布局场景：避免列表项之间双倍边距，或统一控制外边距。传统做法是给所有项设 同理，也可用 真正难的不是怎么写这两个伪类，而是判断什么时候该用它们、什么时候该让位于更语义化或更可控的方案——比如用 或注释节点），:first-child 就会失效——它只看 DOM 树中的顺序位置，不识别标签名。
li:first-child 不会命中任何元素，因为第一个子节点是注释。解决方法是改用 li:first-of-type，它只找第一个 元素，跳过其他类型节点。
:first-child / :last-child 前，先确认父容器子元素结构是否干净:first-of-type 和 :last-of-type
标签都会影响 :first-child 判断实用技巧：用
:first-child 和 :last-child 控制相邻元素间距margin-bottom，再用 :last-child 覆盖掉最后一项的 margin。li {
margin-bottom: 1rem;
}
li:last-child {
margin-bottom: 0;
}:first-child 处理顶部留白：section > .card {
margin-top: 1.5rem;
}
section > .card:first-child {
margin-top: 0;
}
margin: 1rem 0 然后单独清除首尾，容易漏掉方向逻辑gap ——gap 会替代 margin 成为首选间距方案兼容性与性能注意点
:first-child 和 :last-child 在 IE9+、所有现代浏览器中完全支持，无兼容风险。但性能上需注意：
transition 或 animation
.is-first）data- 属性标记首尾，或交由 JS 管理状态。
