必须同时写 button:disabled 和 button[disabled]，因 react/vue 动态设 disabled 属性不写入 html，仅 :disabled 无法覆盖 ssr 或手动操作场景；需显式设 cursor: not-allowed、颜色组合（如 #999/#f0f0f0）、pointer-events: none 等确保全端兼容。
直接结论：只写 button:disabled 不够，必须同时覆盖 button[disabled]，否则 JS 动态禁用的按钮样式会丢失。
为什么 button:disabled 在 React/Vue 里有时不生效？
因为框架（如 React）设置 disabled={isSubmitting} 时，是直接操作 DOM 的 disabled 属性（el.disabled = true），但不会自动写入 HTML 属性 disabled=""。而 :disabled 是状态伪类，能响应这个变更；[disabled] 是属性选择器，只匹配显式带 disabled 属性的元素（比如手写 <button disabled></button>）。
所以只靠 button:disabled 看似够用，但若页面中混有服务端渲染、SSR 静态 HTML 或部分 JS 手动移除/添加属性的逻辑，就容易漏掉样式。
- 稳妥写法必须并列声明：
button:disabled, button[disabled] - 不要依赖单一选择器，尤其在混合渲染场景下
- Vue 的
:disabled="bool"和 React 的disabled={bool}都走 DOM 属性赋值，:disabled能捕获，但测试时仍建议手动检查生成的 DOM 是否真有disabled=""属性（有些旧版框架或自定义封装会绕过）
cursor: not-allowed 为什么没出现？
浏览器对 :disabled 的处理仅限于交互阻断（不触发事件、不聚焦），完全不修改光标样式。button 默认是 cursor: default，a 默认是 cursor: pointer，禁用后仍保持原样。
- 必须显式写：
button:disabled, button[disabled] { cursor: not-allowed; } - 如果按钮已有行内样式
style="cursor: pointer"，CSS 规则会被覆盖，需加!important或改用更具体的选择器（如.btn:disabled） - 移动端无鼠标，该样式纯为桌面端反馈，不影响功能，但别省略——它是用户第一眼识别“不可点”的关键信号
禁用按钮的背景和文字颜色怎么配才不翻车？
别用 opacity: 0.5 —— 它会让图标、边框、阴影全变灰，破坏视觉层次，还可能让屏幕阅读器误判内容可用性。WCAG 要求禁用态文字对比度仍不低于 4.5:1（小字）或 3:1（大字）。
- 推荐组合：
color: #999+background-color: #f0f0f0+border-color: #ddd - 避免渐变背景或图片上直接套
opacity，优先用颜色替换 - Safari（尤其
type="submit"按钮嵌在<form></form>里时）对:disabled样式支持保守，建议所有禁用态样式都写死，不依赖继承
移动端按钮禁用样式失效的常见补救
iOS Safari 对 :disabled 的支持不完整，常出现“点了还有反馈”“颜色没变”“甚至还能聚焦”的情况。
- 必须加
pointer-events: none，否则触摸事件可能穿透或误触发 - 但注意：
pointer-events: none会同时禁用键盘焦点（Tab导航失效），如需保键盘可访问性，改用touch-action: none+user-select: none组合 - 滤镜（
filter: grayscale()）在 iOS 12–14 有渲染延迟或闪烁，且高对比度模式下失效，不推荐 - 最稳方案：
opacity: 0.45+color和background-color显式设色 +cursor: not-allowed+pointer-events: none
真正麻烦的不是写几行 CSS，而是得同时兼顾桌面/移动、JS 动态/静态 HTML、键盘/触摸/辅助技术四条线。一个 :disabled 选中器背后，全是兼容性细节堆出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
