:enabled伪类仅匹配原生支持disabled属性的表单控件（如input、button、select等），不识别div或自定义组件上的disabled属性；它语义明确、响应动态禁用状态，且在fieldset继承禁用等场景下比:not(:disabled)更准确可靠。
:enabled 伪类不是“锦上添花”，而是表单状态样式控制的必要手段——它只匹配真正可交互的原生表单控件，且响应 disabled 属性的动态变更。硬写 input 或用 [disabled] 都会漏掉继承禁用、JS 动态切换等真实场景。
哪些元素能被 :enabled 匹配？
仅限浏览器原生支持 disabled 属性的表单控件：
-
<input>（除type="hidden"外） <button>-
<select>和<optgroup> <textarea>
⚠️ <div disabled>、<span disabled>、自定义组件上的 disabled 属性，:enabled 完全不识别。这类元素必须靠 class 控制，比如 .is-disabled。
:enabled 和 :not(:disabled) 真的等价吗？
不等价，语义和行为都有差异：
立即学习“前端免费学习笔记（深入）”；
-
:enabled是语义化伪类，只作用于支持disabled的表单控件，且排除<input type="hidden"> -
:not(:disabled)是逻辑取反：只要没被:disabled匹配就生效，哪怕<p disabled>这种非法写法也会被选中 - 在
<fieldset disabled>内部，子<input>虽无disabled属性，但仍被:disabled匹配 →:enabled正确排除它，而:not(:disabled)会错误命中
所以别图省事用 :not(:disabled) 替代 :enabled，尤其在无障碍或复杂嵌套表单里容易出错。
JavaScript 动态切换时，为什么样式没更新？
常见失效不是 CSS 问题，而是 DOM 状态没真实同步：
- 只改了 JS 对象属性：
el.disabled = true✅ 有效（现代浏览器都支持） - 但忘了同步 DOM 属性：
el.setAttribute('disabled', '')❌ 某些旧版 Safari 可能不触发重绘 - 框架中变量为
undefined或null，导致:disabled属性根本没渲染出来 →:enabled默认命中，但用户预期是禁用 - 用
pointer-events: none+opacity“视觉禁用”，但没设disabled属性 →:enabled仍匹配
验证方式很简单：打开 DevTools，看元素上是否真实存在 disabled 属性（不是只是 style 变灰）。
配合 :focus 或 :hover 时要注意什么？
伪类顺序和焦点残留是两个隐形坑：
- 写成
input:enabled:hover安全；input:hover:enabled在部分浏览器（如旧 Edge）可能不生效 -
input:enabled:focus和input:focus同时存在时，后者权重低，会被覆盖 —— 用户 tab 进去后 JS 突然禁用该元素，焦点还在但:enabled:focus不匹配 → 样式消失，且焦点卡住 - 移动端 Safari 对
:enabled:focus支持弱，建议加.focus-visible回退，或用focusin事件监听并手动加 class
最易被忽略的是：禁用后焦点不会自动移出。仅靠 CSS 无法解决，必须配 JS 主动 element.focus() 到下一个可用元素，否则键盘用户会卡住。
