直接用:disabled可选中原生支持的禁用表单控件（input/button/select/textarea），但不适用于div等非表单元素；需配合opacity: 0.6和cursor: not-allowed，并双重校验JS事件中的disabled状态。
怎么用 :disabled 选中被禁用的表单控件
直接写 :disabled 就行，它原生支持 <input>、<button></button>、<select></select>、<textarea></textarea> 这几类元素。注意：不是所有元素都响应这个伪类，比如 <div disabled> 完全无效——<code>disabled 属性只对表单可交互元素有意义，且必须是 HTML 原生支持的属性（不能靠 JS 添加 class 模拟）。
常见错误是给自定义组件加 disabled 属性却忘了加 role="button" 或设置 tabindex="-1"，这时 :disabled 依然不生效，因为浏览器根本不认它是“可禁用控件”。
置灰效果该用 opacity 还是 filter: grayscale()
opacity 更稳妥：opacity: 0.6 能统一降低所有子内容透明度，包括文字、边框、背景色，视觉上就是“不可用感”。但要注意副作用——它会让整个元素及其子元素都变半透明，如果里面嵌了图标或 badge，可能糊成一片。
filter: grayscale(80%) 看似更“精准”，但兼容性差（IE 完全不支持），且不会影响光标或焦点行为；更重要的是，它不改变元素的点击穿透性，用户仍可能误点到灰掉但没真正禁用的控件上。
立即学习“前端免费学习笔记（深入）”；
- 优先用
opacity+cursor: not-allowed组合 - 避免在
:disabled里用filter，除非你明确控制了所有子元素的渲染层级 - 别用
color: #aaa单独改文字色——背景色可能也得同步调，否则对比度不达标（尤其深色主题下）
为什么光标改成 not-allowed 后点击还是能触发
因为 :disabled 只禁用原生表单行为（如输入、提交），不阻止事件冒泡或监听器执行。哪怕按钮灰了、光标变了，只要绑了 onclick，JS 依然会运行。
正确做法是双重防护：
- HTML 层面确保用了原生
disabled属性（不是data-disabled） - CSS 层面加
pointer-events: none（注意：这会让 focus 失效，慎用于需要键盘导航的场景） - JS 层面在事件处理器开头加
if (e.target.disabled) return
最安全的组合是：原生 disabled + :disabled { opacity: 0.6; cursor: not-allowed; } + JS 中显式检查 disabled 状态。
IE 和旧版 Safari 下 :disabled 不生效怎么办
IE10+ 和 Safari 5.1+ 都支持 :disabled，但老版本（如 IE9）对 <fieldset></fieldset> 或某些动态添加的 disabled 属性识别滞后。此时不要硬扛，用 JS 补一层 class：
input[disabled], select[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
input.disabled, select.disabled {
opacity: 0.6;
cursor: not-allowed;
}
然后在 JS 设置禁用时同步加 class：el.disabled = true; el.classList.add('disabled');。这不是优雅解法，但比一堆 hack 更可控。
真正容易被忽略的是：当表单控件被 fieldset[disabled] 包裹时，内部所有控件都会继承禁用状态，但 :disabled 选择器**不会匹配它们**——你得单独写 fieldset[disabled] input 这类规则。
