必须同时使用 :disabled 伪类和 [disabled] 属性选择器，否则 SSR、框架组件或自定义元素中 disabled 属性未透传时样式失效；禁用样式需显式设置 color、background、border、cursor 等多属性，不可仅依赖 opacity 或 filter；非原生元素不支持 :disabled，须用 class + aria-disabled + tabindex 配合；:enabled 不是 :disabled 的反向兜底，应优先用 :not(:disabled)。
只写 :disabled 会漏掉大量真实禁用的按钮和输入框，必须搭配 [disabled] 属性选择器，否则上线后必然出现“看着禁用、实际能点”或“部分按钮变灰、部分没反应”的问题。
button:disabled 和 button[disabled] 必须同时写
React、Vue 等框架中设置 disabled={true} 并不等于在 DOM 上写入 disabled 属性；很多 UI 组件只是把值存在 props 里，没透传到底层 <button> 标签上。而 button:disabled 只匹配“浏览器原生识别为禁用状态”的元素，button[disabled] 则只要 HTML 属性存在就生效——包括 SSR 渲染的静态 HTML、手动 el.setAttribute('disabled', '')、甚至自定义组件如 <MyButton disabled>。
- 错误写法：
button:disabled { ... }—— 本地开发可能正常，上线后 SSR 或动态设 disabled 的按钮全失效 - 正确写法：
button:disabled, button[disabled] { ... } - 扩展到其他控件：
input:disabled, input[disabled], select:disabled, select[disabled] - 自定义组件加类名支持：
.my-button:disabled, .my-button[disabled]
禁用样式不能只靠 opacity 或 filter
opacity: 0.5 或 filter: grayscale(100%) 单独使用风险极高：前者让文字对比度跌破 WCAG 4.5:1（尤其深色模式下不可读），后者在 iOS Safari 旧版常渲染失败或全黑，且两者都不改鼠标指针、不阻断键盘焦点、不屏蔽屏幕阅读器播报。
- 必须显式控制多个通道：
color: #999+background-color: #f5f5f5+border-color: #ddd - 强制改光标：
cursor: not-allowed（浏览器不会自动加） - 禁用悬停残留：
transition: none - 慎用
pointer-events: none—— 它会让 Tab 键跳过该元素，破坏键盘导航
非原生表单元素根本匹配不到 :disabled
:disabled 伪类只对 <button>、<input>、<select>、<textarea> 这几类原生可禁用元素生效。给 <div role="button"> 或封装组件加 disabled 属性，CSS 完全无视。
立即学习“前端免费学习笔记（深入）”；
- 优先方案：换回语义化
<button type="button">，别用 div 模拟按钮 - 必须用自定义组件时：
<MyButton class="is-disabled">，再配.is-disabled { cursor: not-allowed; color: #999; } - 同步加
aria-disabled="true"和tabindex="-1"，否则键盘用户和屏幕阅读器感知不到禁用 -
fieldset[disabled]下的子元素不触发input:disabled—— 得单独写fieldset[disabled] input
:enabled 不是 :disabled 的反向兜底
:enabled 匹配的是“本身支持禁用、且当前未被禁用”的元素，它对 <div>、<p> 这类本来就不支持 disabled 的标签完全无效。它真正有用的地方是精细强化可交互态，比如统一重置所有 input 默认样式后，再用 input:enabled 单独加边框高亮或 focus outline。
- 别用
:enabled替代:not(:disabled)—— 后者更直白，兼容性一致（IE9+） -
input[type="hidden"]永远不匹配:enabled，尽管它没有disabled属性 - 想覆盖启用态，优先用
input:not(:disabled)，语义清晰、行为确定
真正麻烦的点从来不在怎么写 CSS，而在于你是否确认过：DOM 上 disabled 属性真存在、框架透传到了底层节点、无障碍属性同步更新、事件处理函数开头有逻辑拦截、不同浏览器对 input[type="date"] 或 input[type="range"] 的禁用渲染是否一致——漏掉任意一环，用户就会遇到“视觉禁用但点击仍有反应”的体验断裂。
