:enabled样式失效最常见原因是目标元素非表单控件或带有disabled属性；它仅对input、button等原生表单元素有效，且要求无disabled属性，fieldset禁用下的子元素虽DOM无disabled但仍被视觉禁用。
为什么 :enabled 样式看起来没生效
最常见原因是目标元素本身不是“可启用状态”——:enabled 只对表单控件（<input>、<button></button>、<select></select>、<textarea></textarea>）起作用，且前提是它们没有 disabled 属性。普通 <div> 或 <code><p></p> 加 :enabled 选择器完全无效，浏览器直接忽略整条规则。
检查方式：打开开发者工具，选中元素，看其是否属于表单控件节点，并确认 disabled 属性未被设置（包括 JS 动态添加的）。
:enabled 和 :disabled 的互斥关系
二者是互斥伪类，但注意：一个元素只要没显式设 disabled，就默认匹配 :enabled；哪怕它被 fieldset[disabled] 祖先禁用，它自身 DOM 上仍无 disabled 属性，此时 :enabled 仍会匹配——但浏览器实际渲染为禁用态。这种“逻辑启用但视觉禁用”的情况容易误判。
- ✅ 正确匹配：
<input type="text">→:enabled生效 - ❌ 不会匹配：
<input type="text" disabled>→:enabled规则被跳过 - ⚠️ 容易踩坑：
<fieldset disabled><input type="text"></fieldset>→ 输入框 DOM 无disabled，:enabled仍命中，但控件不可交互
与 JavaScript 启用/禁用状态不同步的问题
JS 通过 element.disabled = false 切换状态时，CSS :enabled 会响应；但如果只操作 class 或自定义属性（如 data-enabled="false"），CSS 无法感知，:enabled 不会变化。
立即学习“前端免费学习笔记（深入）”；
另外，某些框架（如 Vue、React）可能延迟同步 DOM 属性，导致样式滞后一帧。可加 console.log(input.disabled) 验证真实 DOM 状态。
- ✅ 推荐做法：始终用
el.disabled = true/false控制原生禁用状态 - ❌ 避免仅靠 class 控制启停，再指望
:enabled响应 - ? 调试技巧：在控制台执行
getComputedStyle(document.querySelector('input')).opacity，确认是否真被应用了样式
浏览器兼容性与伪类组合限制
:enabled 自 IE9+、所有现代浏览器均支持，但和某些伪类组合时有陷阱。例如 input:enabled:focus 没问题，但 input:enabled::placeholder 在 Safari 15.4 之前不生效（placeholder 是伪元素，不能和状态伪类链式叠加）。
另外，部分旧版 Android WebView 对 :enabled 解析不稳定，若需强兼容，可用 class 模拟：input.js-enabled + CSS input.js-enabled 替代。
真正难排查的，往往是父级 fieldset[disabled] 导致的“伪启用”，或者框架劫持了原生 disabled 属性但没同步到 DOM。这时候看 computed styles 不够，得盯紧 Elements 面板里的实际属性。
