:disabled伪类不优雅，仅匹配原生可禁用元素，需手动补全光标、焦点和灰度处理；button:disabled失效常因DOM无disabled属性或误用自定义元素。
直接说结论：:disabled 伪类本身不“优雅”，它只匹配原生可禁用元素，且默认不改光标、不处理焦点、不兼容灰度滤镜——所谓“优雅”全靠你手动补全这三块。
button:disabled 样式没生效？先查 DOM 是否真实含 disabled 属性
浏览器只对 <button>、<input>、<select>、<textarea>、<fieldset> 这几类原生表单控件响应 :disabled。写成 <div disabled> 或给自定义组件加 disabled 属性，CSS 完全不识别。
常见漏点：
- React 中写
disabled={isLoading ? true : false}，当isLoading为false时，disabled={false}仍会渲染disabled=""到 DOM，按钮真被禁用了 - Vue 中用
v-bind:disabled="isDisabled"，但isDisabled是undefined，也会残留空属性 - JS 动态控制时用了
el.setAttribute('disabled', 'true')，语义错误；应改用el.disabled = true，确保 IDL 属性与 DOM 同步
验证方法：打开 DevTools，手动删掉 DOM 中的 disabled 属性，看样式是否同步消失——如果没变，说明压根没走 :disabled 规则。
立即学习“前端免费学习笔记（深入）”；
cursor: not-allowed 必须显式写，别指望浏览器自动改
:disabled 只禁交互逻辑（点不动、不触发事件、不聚焦），但光标仍沿用元素默认值：<button> 是 default，<a> 是 pointer。用户看到灰按钮却悬停显示手型，第一反应就是“能点”。
实操要点：
- 必须写
button:disabled { cursor: not-allowed; }，不能依赖全局重置或父级样式 - 如果按钮有行内样式
style="cursor: pointer"，CSS 规则会被覆盖，此时加!important是合理例外 - 移动端无鼠标，该声明纯为桌面端反馈，不影响功能逻辑
别只靠 opacity，禁用态要同步重置 color、background-color、outline 和 box-shadow
单写 opacity: 0.6 是危险操作：
- 高对比度模式下文字可能完全不可读（WCAG 不通过）
- 键盘用户 Tab 过去时，
:focus框依然亮起，造成“看着禁用却能聚焦”的错觉 - 若主样式用了
box-shadow模拟 focus 状态，禁用后阴影还在，视觉混乱
推荐组合写法：
button:disabled {
background-color: #e0e0e0;
color: #999;
cursor: not-allowed;
outline: none;
box-shadow: none;
}
对 input[type="checkbox"] 或 radio 要单独处理——系统渲染的原生控件不受 filter 影响，得用 input[type="checkbox"]:disabled + label 去降关联 label 的饱和度。
filter: grayscale() 在 Safari 旧版会全黑，生产环境慎用
想用灰度做禁用态？filter: grayscale(1) 在 Safari ≤15.3 下解析异常，常显示为纯黑块，且不改变光标、不阻止焦点、不传达语义。
更稳妥的路径：
- 优先用
color+background-color+opacity组合，兼容性拉满 - 若坚持用
filter，至少加 fallback：filter: grayscale(1) brightness(0.9); - 深色模式下反向调整：
filter: saturate(0.7) brightness(1.15);，避免发“脏” - 永远同步设置
aria-disabled="true"和tabindex="-1"（对非表单元素），否则屏幕阅读器和键盘用户会卡住
真正可靠的禁用，是 DOM 层设属性、CSS 层控视觉、行为层拦事件——三者缺一不可。灰度只是最表层的一笔，漏掉任意一环，用户就会遇到“看着像不能点，结果点了有反应”或者“读屏器说能点，但点不动”的情况。
