最可靠方式是button:disabled；它支持所有原生可禁用表单控件，但不适用于div等非表单元素；需同时处理视觉降级、交互反馈和焦点控制，避免pointer-events:none损害可访问性。
如何用CSS选中disabled状态的按钮
直接写 button:disabled 就行，这是最可靠、浏览器支持最广的方式。别用 [disabled] 属性选择器去匹配——它会漏掉那些通过 JavaScript 动态设置 disabled 的元素（比如 btn.disabled = true），因为此时 DOM 属性可能没同步更新。
:disabled 伪类的实际生效范围
它不只对 button 有效，所有原生可禁用的表单控件都支持：input、select、textarea、optgroup、option。但注意：div 或自定义组件加了 disabled 属性也不会触发 :disabled，因为它不是表单元素。
-
input[type="checkbox"]:disabled能正确变灰 + 失去焦点 -
div[disabled]写了也无效，得靠 class 模拟，比如.is-disabled - 在 Shadow DOM 里，如果宿主元素没显式透出
:disabled，子组件里的:disabled可能不生效
常见视觉降级误区
很多人只改颜色，结果禁用按钮看起来还是“能点”。真正有效的禁用样式得同时处理三件事：
- 降低对比度：用
opacity: 0.6或调暗color和background-color - 移除交互反馈：必须写
cursor: not-allowed，否则鼠标悬停时仍是手型 - 切断焦点能力：加上
pointer-events: none是危险操作——它会让键盘Tab仍能聚焦该按钮，但点击无效，造成可访问性断裂；应避免
推荐组合：button:disabled { color: #999; background: #eee; cursor: not-allowed; }
立即学习“前端免费学习笔记（深入）”；
IE8–IE11 的兼容性补丁
IE8 不支持 :disabled，IE9+ 支持但有 bug：当按钮初始渲染时未禁用，之后 JS 设置 disabled = true，样式可能不自动更新。解决方案只有两个：
- 强制重绘：设置后立即
btn.style.display = 'none'; btn.offsetHeight; btn.style.display = ''; - 退回到 class 控制：
btn.classList.add('is-disabled')，再写button.is-disabled样式
现在多数项目已放弃 IE8，但若要保 IE9–10，class 方案更稳——毕竟伪类在动态状态切换时就是不可靠的。
禁用样式的真正难点不在选择器本身，而在状态同步时机和可访问性连带影响。一个 :disabled 写错，可能让屏幕阅读器读不出“已禁用”，或者键盘用户卡在不可操作的按钮上。
