:disabled伪类仅匹配原生支持禁用语义的表单元素，包括button、input（除type="hidden"外）、select、textarea、optgroup、option、fieldset；div、span等通用容器或自定义组件添加disabled属性不触发该伪类。
:disabled 是唯一能正确响应表单元素禁用状态的 CSS 伪类，但它只对原生可禁用控件生效，不是所有加了 disabled 属性的标签都能触发它。
哪些元素真正匹配 :disabled
浏览器只对明确支持禁用语义的 HTML 表单元素实现 :disabled 逻辑：
-
<button>、<input>（除type="hidden"外） -
<select>、<textarea> -
<optgroup>和<option>（注意：禁用<option>时，需写在标签内，如<option disabled>） -
<fieldset>（禁用后其内部表单控件也继承禁用态）
<div disabled>、<span disabled> 或自定义组件上加 disabled 属性，完全不匹配 :disabled —— 因为它们没有内置禁用行为，浏览器既不阻止交互，也不触发该伪类。
:disabled 不生效的三个高频原因
样式写对了，但就是没反应？大概率卡在这几个环节：
立即学习“前端免费学习笔记（深入）”；
- 写了
button[disabled]或button.disabled，却漏掉冒号——必须是button:disabled，不是button:disabled的简写或别名 - JS 动态设置时用了
el.setAttribute('disabled', 'true')，而不是el.disabled = true；后者才确保 DOM 属性和 JS 属性同步，且被 UA 正确识别 - 框架封装（如 React 的
<Button>、Vue 的<my-input>）没把disabled属性透传到底层<button>或<input>；检查最终渲染出的 HTML，确认disabled是否真实出现在原生标签上
为什么不用 :enabled 做“默认启用态”兜底
:enabled 确实存在，但它不是 :disabled 的反向补丁，而是独立语义：“支持禁用 + 当前未禁用”。这意味着：
-
<div>、<p>这类本来就不支持disabled的元素，永远不匹配:enabled -
<input type="hidden">即使没写disabled，也不匹配:enabled（规范将其归为“不可交互”类型） - 想表达“只要没禁用就应用样式”，更直白、兼容性一致（IE9+）的写法是
input:not(:disabled)，而非依赖:enabled
禁用样式必须显式重置，别信浏览器默认
不同浏览器对 :disabled 元素的默认样式处理差异很大：Chrome 可能只降 opacity，Safari 会强制改 color 且不改 background，Firefox 对 cursor 的处理也不统一。
安全做法是显式覆盖关键属性：
button:disabled {
background: #e0e0e0;
color: #999;
border-color: #ccc;
cursor: not-allowed;
pointer-events: none; /* 注意：这会阻止 focus，慎用 */
}尤其注意：pointer-events: none 虽然视觉上“禁用感”强，但它会切断焦点、键盘导航、屏幕阅读器识别等语义能力，**真禁用请优先靠原生 disabled 属性，而非纯 CSS 模拟**。
