常见错误是button:not(:first-child)失效，因:first-child判断父元素首个子元素是否为button，而非兄弟button中首个；正确做法是限定作用域如.btn-group>button:not(:first-child)或用button+button。
button:not(:first-child) 为什么没生效
常见错误是直接写 button:not(:first-child) 却发现所有按钮都匹配了——因为 :first-child 判断的是「父元素下的第一个子元素是否为 button」，而不是「这个 button 是否是兄弟 button 中的第一个」。如果按钮前面有其他元素（比如 <span> 或注释），那第一个 button 就不是 :first-child，自然被 :not(:first-child) 匹配进去。
正确做法是确保按钮是连续的、同级的、且父容器中没有干扰子元素；或者改用更可靠的定位方式：
- 用
button + button选中「有前一个 button 紧邻的 button」，即从第二个开始的所有 button - 或用
button:not(:first-of-type)（前提是 button 是该类型中第一个出现的） - 更稳妥的是加个 wrapper 类名，比如
.btn-group > button:not(:first-child)，并保证 HTML 结构干净
如何只去掉最后一个按钮的右边框
目标很具体：按钮横向排列，中间按钮之间有竖线分隔，但首尾不需要。这时候最直接的是给所有按钮设右边界，再用 :last-child 覆盖掉最后一个：
button {
border-right: 1px solid #ccc;
}
button:last-child {
border-right: none;
}
注意：:last-child 同样依赖 DOM 位置，如果按钮后面还有元素（比如隐藏的 <div>），它就失效。此时可换用：
立即学习“前端免费学习笔记（深入）”；
-
button:not(:last-of-type)（兼容性稍差，IE 不支持） - 或用 Flex 布局 +
gap替代边框，彻底避开伪类陷阱：.btn-group { display: flex; gap: 8px; }
多个按钮组混排时 :not 选择器作用域混乱
如果页面里有多个 .btn-group，而你写了全局的 button:not(:first-child)，就会跨组误删样式——比如第二组的第一个按钮，因前面有第一组的按钮，被当成「非 first-child」而应用了不该有的样式。
必须限定作用域：
- 给每组加独立容器：
<div class="btn-group"><button></button><button></button></div> - 然后写
.btn-group > button:not(:first-child)，箭头>确保只选直系子元素 - 避免用
button:not(:first-child)这种无上下文的选择器，尤其在组件化项目里
兼容性与性能提醒：:not() 里别嵌太深
虽然现代浏览器都支持 :not()，但嵌套伪类（如 :not(:first-child):not(:last-child)）在旧版 Safari 和部分安卓 WebView 中可能解析异常。更关键的是，CSS 引擎对复杂 :not() 的匹配效率略低，尤其在大量按钮动态插入时。
建议优先用组合选择器替代多重否定：
- 要选「中间按钮」？用
.btn-group > button + button:not(:last-child) - 或干脆 JS 控制 class：
btn btn--middle，逻辑清晰且可控 - 真要用
:not()，保持单层，参数只用基础伪类（:first-child、:last-child、:nth-child(n)）
边缘去色看着简单，但 DOM 结构松动、多组共存、老浏览器兜底这三件事，最容易让 :not() 突然不按预期工作。
