disabled伪类本身不触发，:disabled只作用于表单控件
直接写 button:disabled { filter: grayscale(1); } 看似合理，但很多情况下没效果——因为 :disabled 是原生伪类，**只匹配原生禁用的表单元素**（如 <button disabled>、<input disabled>），对 div、span 或加了 disabled="true" 但非表单语义的元素完全无效。更常见的是：你用了 pointer-events: none 或 JS 控制点击逻辑，却误以为 :disabled 会响应。
真正生效的两种写法：原生 disabled 属性 vs 自定义 class
想让灰度样式稳定生效，只有两条路可走，别绕：
- 用原生
disabled属性：确保元素是<button>、<input>、<select>等可禁用的 HTML 表单控件，并真实设置disabled属性（不是disabled="false"，也不是字符串值） - 放弃
:disabled，改用自定义 class：比如.is-disabled，然后写button.is-disabled { filter: grayscale(0.8); opacity: 0.6; }，JS 控制 class 切换 - 注意：某些框架（如 React）中，
disabled={false}不会移除属性，需用条件渲染或显式删除属性，否则 DOM 上仍存在disabled=""，按钮真被禁用了
filter: grayscale() 在不同浏览器下的兼容性坑
filter 在老版 Safari（grayscale() 解析异常（比如显示全黑）。如果必须兼容，优先考虑 opacity + background-color 搭配：
button:disabled {
opacity: 0.5;
background-color: #e0e0e0;
color: #999;
}
若坚持用灰度，至少加 fallback：
立即学习“前端免费学习笔记（深入）”；
- 用
filter: grayscale(1) brightness(0.9);避免 Safari 下过暗 - 避免单独依赖
filter做状态区分——它不改变鼠标指针，也不阻止焦点，用户可能仍尝试键盘操作 - 测试时打开 DevTools，手动删掉
disabled属性，看样式是否同步消失，验证是否真由该伪类控制
禁用状态不只是视觉，还要同步交互与语义
只加灰度，按钮依然能获得焦点、被屏幕阅读器读作“可用”，这是典型半残废状态。真正可靠的禁用，必须三者一致：
- DOM 层：设
disabled属性（表单控件）或aria-disabled="true"（非表单元素） - CSS 层：用
:disabled或自定义 class 控制视觉，同时加cursor: not-allowed - 行为层：确保
click、keydown事件不触发，或在 handler 开头用if (el.disabled) return;拦截
灰度只是最表层的一笔，漏掉任意一环，用户就会遇到“看着像不能点，结果点了有反应”或者“读屏器说能点，但点不动”的情况
