:disabled需作用于原生表单元素并显式设置filter、color等样式才能生效；:disabled响应动态状态，优于[disabled]；pointer-events:none无语义且影响可访问性；高对比度下需用@media(forced-colors:active)兜底。
怎么让:disabled真正生效并显示灰度效果
很多同学加了disabled属性，但样式没变，或者灰度不明显——根本原因是:disabled只作用于原生可禁用元素（<button></button>、<input>、<select></select>、<textarea></textarea>），对<div>或自定义组件无效，且默认浏览器样式可能压过你的灰度设置。
<p>实操建议：</p>
<ul>
<li>确保目标元素是原生表单控件，且正确设置了<code>disabled属性（不是disabled="false"这种错误写法）
color、background-color和opacity，避免依赖浏览器默认灰度filter: grayscale(100%)而非仅调低opacity，后者会模糊文字可读性button:disabled {
color: #999;
background-color: #eee;
filter: grayscale(100%);
cursor: not-allowed;
}
:disabled和[disabled]有区别吗
有。两者在匹配行为上完全一致，但语义和可维护性不同：前者是伪类，后者是属性选择器。关键差异在于动态状态更新。
实操建议：
- 用
:disabled——它能响应JavaScript中el.disabled = true的实时变化；而[disabled]在某些旧版WebKit中可能不触发重绘 - 不要混用：
button:disabled, button[disabled]冗余且增加CSS体积 - 若需兼容IE8及更早版本（极少见），才考虑降级用
[disabled]，但此时filter也不支持，得改用opacity+color组合
为什么pointer-events: none不能替代:disabled
因为pointer-events: none只是拦截鼠标事件，不改变元素的语义状态或可访问性（a11y）。屏幕阅读器仍会把它当作可操作项播报，键盘焦点也能落到上面，用户按Tab后会卡住。
实操建议：
-
:disabled是语义正确的方案，自带a11y支持（ARIA会自动识别） - 如果必须禁用非表单元素（如
<div role="button">），应同时设置<code>aria-disabled="true"+tabindex="-1"+ CSS灰度，而不是只加pointer-events: none - 注意：
pointer-events: none会让子元素也失焦，有时反而是坑（比如内部有<span></span>要选中文字） - 用
@media (forced-colors: active)做兜底（Edge/Chrome 106+、Firefox 103+支持） - 在该媒体查询内，放弃
filter，改用border+color+background的强对比组合 - 测试时务必开启系统高对比度设置，别只靠模拟器
灰度效果在高对比度模式下失效怎么办
Windows高对比度模式（或macOS“增加对比度”）会强制覆盖大部分filter和color，导致灰度消失，界面逻辑被削弱。
实操建议：
@media (forced-colors: active) {
button:disabled {
border: 2px solid GrayText;
color: GrayText;
background-color: Canvas;
}
}
灰度不是装饰，是状态信号。很多人调完filter就以为完了，但忘了检查键盘焦点是否还能进入、屏幕阅读器是否跳过、高对比度下是否还剩一点视觉区分——这些地方一漏，禁用逻辑就断了。
