CSS :disabled伪类统一禁用按钮样式的方法

直接说结论：很多开发者在编写CSS禁用按钮样式时，只写一个button:disabled就收工了，但这样在不少实际场景下会失效。必须要同时使用button:disabled和button[disabled]才能覆盖所有情况，确保样式稳定生效。

只写 button:disabled 远远不够，必须同时声明 button:disabled 和 button[disabled]，否则在 React/Vue 动态禁用的按钮遇上 SSR 或混合渲染场景时，样式很容易被漏掉。

为什么单独使用 button:disabled 经常失效

问题可能不在CSS本身，而在于DOM属性是否真实存在。React的disabled={true}和Vue的:disabled="true"，本质上是通过JavaScript修改了元素的disabled属性，但并不会在HTML标签里显式写入disabled=""。因此浏览器能通过:disabled伪类匹配到它，但attribute选择器[disabled]却抓不到。反过来，服务端渲染出来的静态页面中，disabled属性是真实写在标签上的，此时[disabled]生效而:disabled可能不生效。两种写法的覆盖范围恰好互补，缺少任何一个都会在某些场景下导致样式丢失。

常见的现象包括：

• 本地开发一切正常，部署到SSR环境后禁用按钮的样式全部丢失
• 按钮看起来已经禁用，但鼠标悬停时高亮色依然存在（被 .btn:hover 覆盖）
• 移动端iOS Safari对:disabled支持较为保守，[disabled]更加稳定可靠

button:disabled, button[disabled] 必须显式控制哪些样式

浏览器对禁用态的默认样式几乎等于没有，只是禁止交互，视觉上完全看不出区别。只靠opacity: 0.5其实是相当危险的做法——它会无差别地把边框、阴影、图标全部变灰，破坏对比度，还可能让屏幕阅读器误判内容的可用性。

推荐组合（满足WCAG最低对比度要求）：

• color: #999 + background-color: #f0f0f0 + border-color: #ddd
• cursor: not-allowed（禁用态不会自动改变光标，需要手动指定）
• pointer-events: none（慎用：会阻止focus，仅建议纯触摸场景使用）
• transition: none（禁用过渡动画，防止悬停态残留）

如果按钮带有行内样式比如style="cursor: pointer"，:disabled规则会被覆盖，需要添加!important或提升选择器权重，例如.btn:disabled。

非原生按钮（如 div 或自定义组件）该如何处理

:disabled伪类只匹配button、input、select、textarea这些原生可禁用元素。给一个div加上disabled属性，CSS无法识别，JS也不会阻止事件，完全没有效果。

正确做法：

• 优先改用语义化的，不要自己模拟按钮
• 如果必须使用自定义组件，用class控制状态：，再配合.is-disabled { cursor: not-allowed; color: #999; }
• 同步设置aria-disabled="true"和tabindex="-1"，确保屏幕阅读器和键盘导航能够感知禁用状态
• JS事件处理开头必须加上if (el.disabled || el.hasAttribute('aria-disabled')) return，不能只靠样式来阻挡逻辑

移动端和 Safari 的特别坑点

iOS Safari对:disabled的样式支持尤其不可靠。例如button[type="submit"]在