:disabled伪类本身不触发灰度，真正生效的是filter: grayscale(100%)等样式规则；其失效常见原因包括元素非原生可禁用控件、浏览器默认样式覆盖、缺少-webkit-filter前缀、父级滤镜干扰或移动端兼容性差，需结合opacity、pointer-events、aria-disabled等多层保障确保视觉与语义一致。
:disabled 伪类本身不触发灰度，它只是匹配状态；真正让按钮变灰的，是你写的 filter: grayscale(100%) 或其他样式规则——但这条规则能否生效，取决于元素是否被浏览器识别为“可禁用”，以及你有没有覆盖掉默认样式。
button:disabled { filter: grayscale(100%) } 为什么没反应
常见错误现象：加了 disabled 属性，DevTools 里也看到属性存在，但按钮颜色/透明度完全没变。
- 目标元素不是原生可禁用控件（比如用了
<div role="button">或自定义组件），:disabled根本不匹配 - 浏览器默认样式（如 Chrome 对
button:disabled的opacity处理）压过了你的filter，尤其在 iOS Safari 上常忽略filter - 写了
filter: grayscale(1)却漏了-webkit-filter前缀，Safari 15.6 及更早版本仍需前缀才生效 - 父容器设置了
filter（比如全局灰度），子元素继承后叠加异常，导致灰度失效或过重
移动端 button:disabled 滤镜失效的补救写法
iOS Safari（尤其是 12–14）对 :disabled 上的 filter 支持不稳定，视觉跳变、延迟应用甚至直接不渲染都发生过。
- 必须搭配
opacity: 0.45+color: #999+background-color: #f5f5f5作为基础 fallback，不能只靠filter - 加
transition: filter 0.15s ease, opacity 0.15s ease，否则启停时容易闪烁 - 禁用触摸穿透：显式加
pointer-events: none，但注意这会同时禁用键盘焦点——若需保持 Tab 导航，改用touch-action: none+user-select: none - 测试时真机连 Safari Web Inspector，手动 toggle
disabled属性，看样式是否实时更新
filter: grayscale() 在非按钮元素上怎么用
对 <div>、<span> 或图标按钮这类非表单语义元素，:disabled 无效，必须换路径。
立即学习“前端免费学习笔记（深入）”；
- 统一用自定义 class，例如
.btn--disabled，并确保 JS 动态增删该 class（不要只改disabled属性） - 写死所有禁用态样式：
filter、opacity、cursor、color、background-color，避免依赖继承 - 背景图按钮？优先换图：
.btn--disabled { background-image: url("btn-disabled.png"); }，比滤镜更稳、更省性能 - 若坚持用
filter，加will-change: filter防低端安卓掉帧，但仅在必要时启用
最易被忽略的一点：灰度只是视觉层，aria-disabled="true" 和实际事件拦截（比如 if (el.disabled) return）必须同步做，否则屏幕阅读器和键盘用户会卡在“看起来不能点、其实能聚焦、点了还报错”的状态里。
