:enabled仅匹配原生支持disabled属性的表单控件（如input、button、select、textarea等），无视div、p等非法disabled标签及未真实渲染disabled属性的框架绑定。
哪些元素能被 :enabled 匹配？
:enabled 只认浏览器原生支持 disabled 属性的表单控件，不是所有写了 disabled 的标签都算数。
-
<input>（type="hidden"除外） <button>-
<select>和<optgroup> <textarea>
<div disabled>、<p disabled> 或自定义组件上加的 disabled 属性，:enabled 完全无视——它不解析属性值，只看语义合法性。
:enabled 不生效的典型原因
最常踩的坑是把“看起来不能点”当成了“真的不可用”。
- 只用了
pointer-events: none+opacity: 0.5，但没加disabled属性 →:enabled仍为真 - JS 设置了
el.disabled = true，却漏掉el.setAttribute('disabled', '')→ 部分旧 Safari 不识别 DOM 属性缺失 - Vue/React 中写
:disabled="flag"，但flag初始为undefined或null→disabled属性压根没渲染出来，:enabled默认命中
记住：:enabled 不猜意图，只看 DOM 上有没有真实存在的 disabled 属性。
立即学习“前端免费学习笔记（深入）”；
:enabled 和 :not(:disabled) 能互换吗？
不能。表面等价，行为不同。
-
:enabled是语义伪类，只作用于支持disabled的表单控件；:not(:disabled)是逻辑取反，会错误匹配<p disabled>这类非法写法 - 在
<fieldset disabled>内部，子<input>没写disabled，但仍被:disabled匹配 →:enabled正确排除它，而:not(:disabled)会错误命中 - IE11 对
:not(:disabled)在<option>上支持不稳定，:enabled更稳妥
组合伪类时容易忽略的细节
:enabled 和 :hover、:focus 组合时，顺序和兼容性会影响结果。
- 写成
input:enabled:hover没问题；input:hover:enabled在部分浏览器里不生效（伪类顺序敏感） - 如果用户 tab 进入一个元素，JS 随后设为
disabled，焦点还在但:enabled已不匹配 →:focus样式失效，仅靠 CSS 无法修复 - 移动端 Safari 对
:enabled:focus支持弱，建议加.focus-visible回退或用 JS 监听focusin动态加 class
真正复杂的地方在于：禁用状态可能来自属性、<fieldset> 继承、JS 动态设置，甚至框架响应式变量的渲染时机。只要 disabled 属性没真实落在 DOM 上，:enabled 就不会翻脸。
