CSS:enabled选择器如何匹配可用表单控件

:enabled只匹配原生支持disabled属性且DOM无disabled属性的表单控件，如input（hidden除外）、button、select、optgroup、textarea；不匹配div、p或自定义组件上的disabled属性，fieldset禁用下的子元素虽不可交互但仍匹配:enabled。

:enabled 只匹配真正原生支持 disabled 属性、且当前 DOM 上没有 disabled 属性的表单控件——不是“看起来能点”，而是浏览器底层认定“可聚焦、可输入、可提交”的元素。

哪些元素能被 :enabled 匹配

仅限以下原生表单控件（且排除特例）：

1. <input>（type="hidden" 除外）
2. <button>
3. <select> 和 <optgroup>
4. <textarea>

以下写法完全无效：

1. <div disabled> —— 浏览器不认，:enabled 直接跳过整条规则
2. <my-input disabled> 或 Vue/React 中 :disabled="false" 但未渲染出 DOM 属性 —— CSS 无法感知响应式变量，只看真实 DOM
3. <p disabled> —— p 标签原生不支持 disabled，伪类无意义

:enabled 在 fieldset[disabled] 下的行为

这是最容易误判的场景：一个 <input> 没写 disabled，但被包裹在 <fieldset disabled> 里，它依然会匹配 :enabled —— 因为它的 DOM 上确实没 disabled 属性。

但用户实际无法操作它。这意味着：

1. CSS 样式会按“启用”渲染（比如亮色背景），但交互被阻断
2. 这不是 bug，是规范行为：:enabled 描述的是元素自身的启用状态，不是祖先控制下的可用性
3. 若需视觉同步，必须额外用 fieldset[disabled] input 覆盖样式，或改用 JS 控制子元素的 disabled 属性

为什么你的 :enabled 样式没生效

常见失效路径：

1. 目标元素不是上述原生控件（比如用了 contenteditable 的 div）
2. JS 动态设置 el.disabled = true，但没触发属性同步（旧版 Safari 或某些框架中，需显式调用 el.setAttribute('disabled', '')）
3. 写了 input:hover:enabled —— 伪类顺序错误，部分浏览器（尤其 Safari）不识别，应写成 input:enabled:hover
4. Vue 中 :disabled="loading"，但 loading 初始为 undefined → 渲染时没生成 disabled 属性 → :enabled 默认命中，造成“本该禁用却显示启用样式”

和 :not(:disabled) 的关键区别

表面等价，但语义与兼容性不同：

1. :enabled 是语义化伪类，只作用于表单控件；:not(:disabled) 是通用否定逻辑，对不支持 disabled 的元素（如 p）也会匹配
2. IE11 中 :not(:disabled) 对 <option> 支持不稳定，而 :enabled 稳定
3. 当元素被 fieldset[disabled] 禁用时：:enabled 仍匹配（DOM 无属性），:not(:disabled) 同样匹配 —— 二者在此场景下行为一致，但前者意图更清晰

真正容易被忽略的是焦点残留问题：用户 tab 进入一个刚被 JS 设为 disabled 的 input，焦点还在，但 :enabled:focus 不再生效，此时仅靠 CSS 无法还原视觉反馈，必须用 JS 监听 focusin 并手动移出焦点或加 class 补偿。