应使用 :enabled 伪类选择实际可交互的表单控件，而非仅依赖元素名或 [disabled] 属性选择器；它动态反映浏览器运行时状态，适用于 button、input（非 hidden）、select、textarea 等表单元素，不适用于 div、span 等非表单元素。
什么时候该用 :enabled 而不是直接写元素名
直接写 input 或 button 会匹配所有同类元素，包括那些被禁用的。而 :enabled 只选中当前可交互的控件——比如用户能点击、能输入、能聚焦的那些。它不看 disabled 属性有没有显式写，而是看浏览器实际是否启用该控件。
-
表单提交前高亮所有可用字段：
input:enabled, select:enabled, textarea:enabled { border: 2px solid #4CAF50; } - 配合 JavaScript 动态切换状态后，样式自动响应，无需手动增删 class
- 注意：
fieldset上设了disabled，其内部所有控件都会被算作:disabled，即使子元素没写disabled属性
:disabled 匹配哪些真实 DOM 状态
:disabled 匹配
的是浏览器判定为“不可用”的控件，不只是写了 disabled 属性的元素。它覆盖以下情况：
-
、等显式声明 -
下的所有可表单控件（含input、select、textarea、button） - 某些浏览器中，
type="hidden"不会被视为:disabled（它本就不参与交互），但type="file"在未触发选择时也可能表现异常，别依赖:disabled判断是否“已选文件”
它不匹配 readonly 元素——input[readonly] 仍是 :enabled，只是不能编辑。
与 [disabled] 属性选择器的区别
:disabled 是伪类，反映运行时状态；[disabled] 是属性选择器，只看 HTML 中是否存在该属性字符串，不管 JS 是否后来移除了它或设为 false。
const btn = document.querySelector('button');
btn.disabled = false; // DOM 属性已更新，:disabled 不再匹配
// 但 btn.hasAttribute('disabled') 可能仍为 true —— 属性没被 removeAttribute() 删除
- 用
:disabled做样式或querySelector(':disabled')更可靠 - 用
[disabled]只适合静态 HTML 分析或调试时快速筛选“带 disabled 字样的标签” - Vue/React 等框架里，
disabled常通过绑定表达式控制（如:disabled="isSaving"），此时只有:disabled能正确响应布尔值变化
常见误用：在非表单元素上乱用
:enabled 和 :disabled 只对**表单控件**有效。W3C 规范明确限定适用元素： button、input（type 非 hidden）、select、textarea、optgroup、option，以及 fieldset（仅 :disabled）。
-
div:disabled永远不匹配，CSS 规则无效 -
span:enabled同样无效，哪怕你给它加了onclick或tabindex - 想让自定义组件有“启用/禁用”样式逻辑？得自己加
data-state="disabled"并用[data-state="disabled"]控制
浏览器不会报错，但样式就是不生效——这是最常被忽略的兼容性盲点。
