button:not([disabled])是最直接、语义清晰且兼容性好的写法，仅匹配真实含disabled属性的按钮，确保hover/active/focus样式只作用于可点击按钮；它比:disabled伪类更稳定，不依赖JS状态，与DOM属性变更完全同步。
button:not([disabled]) 是最直接的排除写法
想让 hover、active 或 focus 样式只作用于可点击按钮，button:not([disabled]) 是语义清晰、浏览器兼容性好（IE9+）的写法。它不依赖 JS 状态，只看 HTML 中是否真实存在 disabled 属性。
常见错误是写成 button:not(:disabled) —— 虽然也能用，但 :disabled 是伪类，[disabled] 是属性选择器，在部分老浏览器（如旧版 Safari）中对伪类的支持更不稳定；而属性选择器匹配更“硬”，且与 DOM 属性变更完全同步。
-
button:not([disabled]):hover会生效，button[disabled]:hover则被自然跳过 - 避免嵌套写法如
button:not([disabled]):not(.is-loading)，优先级易失控，建议拆成独立规则 - 如果按钮是
<input type="submit">，同样适用：input[type="submit"]:not([disabled])
为什么不用 pointer-events: none 来“禁用点击”？
很多人想靠 pointer-events: none 让按钮点不动，再用 :not([disabled]) 做样式区分 —— 这是错的。因为 pointer-events: none 会让元素彻底脱离交互流，:hover 和 :active 都不会触发，button:not([disabled]) 规则本身也失去意义。
真正要“排除禁用按钮的点击”，必须靠原生 disabled 属性：它既阻止默认行为（提交、聚焦、键盘响应），又让 CSS 能精准识别状态。
立即学习“前端免费学习笔记（深入）”；
- 禁用按钮仍能被点击？大概率是事件监听绑在父容器，且没检查
event.target.disabled - 用
pointer-events: none模拟禁用，必须手动加aria-disabled="true"和tabindex="-1"，否则屏幕阅读器无法感知 -
button[disabled]已隐含pointer-events: none的效果，无需重复声明
React/Vue 中 button:not([disabled]) 失效的典型原因
框架组件常把 disabled prop 渲染成 class 或内联样式，而不是透传到原生 <button> 上。结果是 DOM 里根本没有 disabled 属性，button:not([disabled]) 自然不匹配。
检查方法很简单：打开 DevTools，看最终渲染出的 <button> 元素上有没有 disabled 字样（不是 disabled="false"，布尔属性只存在即生效）。
- React 中应写
<button disabled={isLoading}>，而不是disabled={isLoading ? true : false}（后者在false时属性被完全省略） - Vue 中用
v-bind:disabled="isLoading"，确保编译后生成真实属性 - 自定义组件内部必须用
attrs.disabled或v-bind="$attrs"把属性透传到底层 button
禁用态样式覆盖导致 not([disabled]) 视觉失效
即使选择器写对了，禁用按钮仍可能显示悬停色或动画，根源是其他规则权重更高，比如 .btn-primary:hover（权重 20）盖过了 button:not([disabled]):hover（权重 11）。
解决思路不是堆 !important，而是提升目标选择器的明确性：
- 写成
button.btn-primary:not([disabled]):hover，权重升到 21，稳压同类规则 - 统一收口：所有按钮基础样式用
button:not([disabled])开头，禁用态用button[disabled]单独重置 - 禁用态务必显式关闭过渡：
button[disabled] { transition: none; }，否则 hover 动画可能残留
最易被忽略的是：禁用按钮的视觉反馈不能只靠颜色变灰。必须组合 cursor: not-allowed、opacity、background-color 和移除 box-shadow，否则用户无法直观判断是否可操作。
