:disabled伪类仅对原生可禁用表单控件生效，如button、input（除hidden外）、select、textarea、optgroup、option和fieldset；div、span等非表单元素即使添加disabled属性也无法匹配该伪类。
:disabled 伪类只对原生可禁用表单控件生效，不是所有带 disabled 属性的元素都能匹配它——div、span 或自定义组件加了这个属性，CSS 完全无视。
哪些元素能用 :disabled？
只有浏览器明确支持禁用语义的原生标签才响应该伪类：
-
button、input（除type="hidden"外） -
select、textarea、optgroup、option -
fieldset（但子元素不直接匹配input:disabled，得写fieldset:disabled input）
写成 <div disabled>按钮</div> 或 React 中 <MyButton disabled /> 却没透传到内部 <button>，样式就永远不会生效。最终渲染出的 DOM 必须是 <button disabled>，而不是仅在 props 或 wrapper 上“看起来像禁用”。
:disabled 样式没生效？先查三件事
常见失效原因不是 CSS 写错，而是状态没真正落地：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，右键检查目标元素，确认
disabled属性是否真实存在于 HTML 标签上（不是 JS 对象属性，也不是 React/Vue 的虚拟属性） - JS 动态设置时，用
el.disabled = true，别只调el.setAttribute('disabled', 'true')—— 后者虽能触发伪类，但语义模糊且可能和框架冲突 - 如果用了
<fieldset disabled>，子<input>不会自带disabled属性，input:disabled选择器无效；得改用fieldset:disabled input
光靠 opacity 和灰色背景是危险的
单设 opacity: 0.6 看似省事，但实际埋雷：
- 高对比度模式下文字可能完全不可读（系统会忽略 opacity，只渲染颜色）
- 键盘用户 Tab 到禁用控件时，
:focus样式仍会显示，造成误导 - 鼠标悬停时默认仍是手型或文本光标，用户误以为可操作
必须显式覆盖：color、background-color、cursor: not-allowed，并清掉焦点干扰：input:disabled:focus { outline: none; box-shadow: none; }。Safari 旧版对 cursor 支持不稳定，生产环境可加 !important（仅此处合理）。
搭配 :enabled 时别踩语义坑
:enabled 不是 :disabled 的简单反义词，它只匹配“本就支持禁用、且当前未被禁用”的元素。比如：
-
input[type="hidden"]永远不匹配:enabled，哪怕没加disabled -
div加了disabled属性，也不会被:enabled或:disabled匹配 - 想兜底所有“非禁用”状态，用
:not(:disabled)比:enabled更直白、兼容性一致
真正需要 :enabled 的场景，是精细强化可交互态：比如统一给所有 input 设浅边框，再单独用 input:enabled 加粗边框或提亮背景。
最易被忽略的点：禁用状态不只是视觉变化，它直接影响焦点流、键盘操作、表单提交行为。纯 CSS 模拟（比如只加 pointer-events: none）永远无法替代真实的 disabled 属性——前者连屏幕阅读器都感知不到状态变更。
