:enabled 伪类并非冗余，它显式声明元素处于可交互状态，用于在动态启用/禁用场景中精确控制样式，尤其在 javascript 控制 `disabled` 属性切换时确保视觉反馈一致。
在表单开发中，<input> 元素默认确实是启用（enabled）状态，但这仅是初始渲染行为。:enabled 的真正价值在于语义化、可维护性与动态响应能力——它不依赖 HTML 初始状态，而是实时响应元素的 disabled 属性变化，为所有可交互的表单控件（如 <input>、<select>、<button>、<textarea>）提供统一的样式钩子。
例如，以下代码展示了 :enabled 与 :disabled 在运行时的精准样式控制：
<input type="text" class="form-control" value="默认启用"> <input type="text" class="form-control" disabled value="已禁用"> <button onclick="toggle()">切换第二项状态</button>
.form-control {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 显式定义所有启用态控件的背景 */
.form-control:enabled {
background-color: #f0fff4; /* 淡绿色，表示可用 */
color: #333;
}
/* 禁用态统一处理 */
.form-control:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}function toggle() {
const input = document.querySelectorAll('.form-control')[1];
input.disabled = !input.disabled;
}⚠️ 注意事项：
- :enabled 不匹配 display: none 或 visibility: hidden 的元素——它只关注 disabled 属性（或隐式禁用逻辑，如 <option> 在禁用 <select> 中）；
- 不要误认为 .useable 类可替代 :enabled：类名需手动维护，而 :enabled 是自动、声明式的，与 DOM 状态完全同步；
- 在可访问性（a11y）层面，:enabled/:disabled 样式配合 aria-disabled 和正确语义，能显著提升屏幕阅读器用户的操作感知。
总结：:enabled 是 CSS 中实现「状态驱动样式」的关键基础伪类。它让样式系统真正成为 UI 状态的镜像，而非静态快照——这是构建健壮、可扩展、无障碍表单体验不可或缺的一环。
立即学习“前端免费学习笔记（深入）”；
