button:disabled不生效的根本原因是dom无disabled属性或元素非原生可禁用类型；必须同时使用button:disabled和button[disabled]覆盖所有场景，并确保属性透传、无障碍同步及事件拦截。
button:disabled 为什么有时完全不生效
根本原因就两个：DOM 上压根没有 disabled 属性，或者目标元素不是原生可禁用类型。浏览器只对 <button></button>、<input>、<select></select>、<textarea></textarea> 这几类元素识别 :disabled；给 <div role="button"> 或自定义组件加 <code>disabled 属性，CSS 完全无视——它不是合法属性，也不会触发伪类匹配。
常见翻车场景：
- React/Vue 中写了
disabled={true}，但组件没把该值透传到底层<button></button>标签上，导致 DOM 里查不到disabled属性 - 服务端渲染（SSR）首屏 HTML 没带
disabled，JS 水合后才动态设置，样式延迟或缺失 - 用 JS 只改了
el.disabled = true，但没同步调用el.toggleAttribute('disabled', true)，部分老环境不触发重绘
必须同时写 button:disabled 和 button[disabled]
只写 button:disabled 是生产环境高危操作。前者依赖浏览器运行时状态识别，后者直接匹配 HTML 属性存在与否——两者覆盖场景不同，缺一不可。
正确写法示例：
button:disabled,
button[disabled],
input:disabled,
input[disabled],
select:disabled,
select[disabled] {
background-color: #f5f5f5;
color: #999;
border-color: #ddd;
cursor: not-allowed;
transition: none;
}
关键点：
-
button[disabled]能捕获 SSR 静态 HTML、手动setAttribute('disabled', '')、甚至<mybutton disabled></mybutton>这类自定义组件（只要属性透传到位） - 若用了封装按钮（如
.btn-primary），需扩展为.btn-primary:disabled, .btn-primary[disabled]，否则类选择器权重可能被覆盖 - 不要用
:not(:disabled)反向兜底，它无法替代显式禁用规则，且易被其他选择器干扰
禁用样式不能只靠 opacity 或 filter
opacity: 0.5 或 filter: grayscale(100%) 单独使用，会埋下三类隐患：视觉可访问性不达标、键盘焦点未阻断、鼠标指针仍是手型。
必须显式控制的通道包括：
-
color和background-color：确保 WCAG 对比度 ≥ 4.5:1（深色模式下也要验证） -
cursor: not-allowed：浏览器不会自动加，不写就还是手型或默认箭头 -
transition: none：防止悬停动画残留，比如禁用后还闪一下 hover 色 - 慎用
pointer-events: none：它会让 Tab 键跳过该元素，破坏键盘导航；表单控件应优先依赖原生disabled属性保障无障碍
非原生按钮必须换方案，不能硬套 :disabled
如果业务强依赖自定义组件（比如带图标+文字+加载态的 <mybutton></mybutton>），:disabled 伪类天生无效。此时唯一可靠路径是语义化改造：
- 优先回归原生：
<button type="button" disabled></button>，而非用<div> 模拟 <li>若必须封装，用 class + <code>aria-disabled+tabindex组合：<mybutton class="is-disabled" aria-disabled="true" tabindex="-1"></mybutton> - 对应 CSS 写
.my-button.is-disabled，并同步控制cursor、color、background等，不依赖伪类 - JS 事件处理函数开头必须加
if (el.disabled || el.getAttribute('aria-disabled') === 'true') return，不能只靠样式“挡”逻辑
真正麻烦的点从来不在怎么写 CSS，而在于你是否确认过：DOM 属性真实存在、框架透传到位、无障碍属性同步、事件拦截写全、浏览器兼容兜底——漏掉任意一环，用户就会遇到“看着不能点，结果点了有反应”的问题。
