button:disabled伪类未生效的根本原因是按钮未真正设置disabled属性，仅用class或style模拟禁用无法触发该伪类；必须确保原生disabled属性存在并透传至底层<button>标签。
button:disabled 伪类为什么没生效
根本原因不是 CSS 写错了，而是按钮压根没真正禁用。只有原生 <button disabled>、<input type="submit" disabled> 这类标签带真实 disabled 属性时，button:disabled 才会匹配。用 class="disabled" 或 style="opacity: 0.5" 模拟，伪类完全不触发。
React/Vue 中常见陷阱：disabled={isDisabled} 没透传到最终 <button> 标签上；或用了 v-bind:class="{disabled: isDisabled}" 却漏了 :disabled="isDisabled"；又或者 JS 里只改 element.className，没动 element.disabled。
验证方法：打开 DevTools，手动删掉 DOM 上的 disabled 属性，看灰度是否同步消失——如果没变，说明你压根没走对路。
怎么写才真正可控的灰度样式
浏览器默认渲染差异极大：Chrome 可能只降 opacity，Safari 可能保留高亮色，深色主题下甚至看不出变化。必须显式覆盖，且三者缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0.6（别低于 0.5，保证文字可读） -
filter: grayscale(0.8)（grayscale(1)在浅色背景上易糊，0.8 更柔和） -
cursor: not-allowed（否则悬停时还是手型，用户误判）
别用 filter: grayscale(100%)——它会模糊文字，部分安卓 WebView 直接失效；也别只靠 background-color: #ccc，深色主题下违和，优先用 background-color: var(--disabled-bg, #eee)。
过渡动画要单独声明：transition: filter 0.2s ease, opacity 0.2s ease。写成 transition: all 0.3s 对 filter 常常无效，尤其在 Safari 和旧 Chrome 中。
图标、文本、状态恢复这些细节容易漏
按钮带 SVG 图标时，button:disabled 不会自动影响子元素。必须额外控制：
- 给图标加
button:disabled svg { opacity: 0.6; }或button:disabled svg path { fill: #999; } - 禁用前存原始文案：
const originalText = btn.textContent；禁用后设为btn.textContent = '提交中…'，不能只变灰 - 异步失败时必须手动恢复：
btn.disabled = false; btn.textContent = originalText；别依赖定时器自动还原
禁用逻辑必须放在 form.addEventListener('submit', e => { ... }) 的第一行，而不是 fetch().then() 里。用户点完立刻再点，请求照样发出去——锁住的是「事件触发瞬间」，不是「响应返回时刻」。
为什么别用 pointer-events: none + class 模拟禁用
这种写法看着像禁用，实际是危险的视觉欺骗：
- 键盘用户仍能
Tab聚焦、按空格/回车触发事件 - 屏幕阅读器读作“按钮，可用”，而非“已禁用”
- 表单回车提交绕过
click，但逃不过submit，只禁一个按钮毫无意义
真正可靠的方案只有一条：用原生 disabled 属性 + 显式 button:disabled 样式。所有框架中都确保该属性透传到底层 <button>，别试图绕开语义层去“模拟”。
复杂点在于：灰度只是表象，背后要同步语义（disabled 属性）、交互（cursor、焦点行为）、可访问性（屏幕阅读器识别）和业务逻辑（文本反馈、错误恢复）。少一个环节，用户就可能多点一次、多等一次、或多报一次错。
