:disabled伪类仅对原生可禁用表单元素（button、input等）生效，div/span等通用标签添加disabled属性无效；需确保属性真实透传至合法dom节点，否则应改用类名控制样式。
disabled 伪类不生效的常见原因
直接写 :disabled 却没反应？大概率是元素本身没被浏览器识别为“可禁用的表单控件”。div、span 这类通用容器加了 disabled 属性也不会触发 :disabled 伪类——CSS 规范只对原生表单元素（如 button、input、select、textarea、optgroup、option）定义该伪类。
- 检查元素是否属于上述合法类型；如果不是，改用类名控制样式，比如
class="is-disabled" -
disabled是布尔属性，写成disabled="false"或disabled="0"依然生效——只要存在该属性，就禁用 - JavaScript 动态设置时，用
el.disabled = true，别只改setAttribute('disabled', 'true')（虽然也管用，但语义不清）
enabled 伪类为什么很少见
:enabled 确实存在，但它不是 :disabled 的反向补丁，而是独立匹配“未被禁用且本身支持禁用状态”的元素。它常被误以为能兜底所有“非 disabled 元素”，但其实对 div、p 这类本来就不支持 disabled 的元素完全无效。
- 它真正有用的地方是精细覆盖：比如先给所有
input设默认样式，再用input:enabled单独强化可交互态的边框或背景 - 不要用
:enabled替代:not(:disabled)——后者更直白，且兼容性一致（都支持到 IE9+） -
input[type="hidden"]永远不匹配:enabled，尽管它没有disabled属性——因为规范把它归为“不可交互”类型
disabled 样式穿透与继承问题
父元素设了 pointer-events: none 或 opacity: 0.5，子元素看起来“像 disabled”，但这和真正的 :disabled 无关，也无法通过伪类捕获。真禁用状态还会影响焦点、键盘操作、表单提交行为，而纯 CSS 视觉模拟做不到这点。
- 禁用后，
input默认会变灰、文字模糊，但不同浏览器渲染差异大（比如 Safari 对color的处理比 Chrome 更激进） - 想统一视觉，建议显式重置：
input:disabled { color: #999; background: #f5f5f5; cursor: not-allowed; } - 避免在
:disabled规则里依赖继承值（如font-size），有些 UA 样式会强制覆盖
React/Vue 中 disabled 状态同步的坑
框架组件如果封装了原生表单元素，但没把 disabled 属性透传到底层 DOM，那 :disabled 伪类照样不会触发。常见于自定义 Button 组件或 UI 库的二次封装。
立即学习“前端免费学习笔记（深入）”；
- 检查最终渲染出的 HTML，确认
disabled属性是否真实出现在button或input标签上 - Vue 中用
v-bind绑定时写:disabled="isDisabled"，别漏掉冒号（否则传字符串字面量） - React 中确保 props 正确 spread 到原生元素：
<button disabled></button>，而不是只靠 class 控制
disabled 属性有没有稳稳落在浏览器认得的标签上。 
