17370845950

:enabled 伪类并非冗余，它显式声明元素处于可交互状态，用于在动态启用/禁用场景中精确控制样式，尤其在 javascript 控制 `disabled` 属性切换时确保视觉反馈一致。

在表单开发中， 元素默认确实是启用（enabled）状态，但这仅是初始渲染行为。:enabled 的真正价值在于语义化、可维护性与动态响应能力——它不依赖 HTML 初始状态，而是实时响应元素的 disabled 属性变化，为所有可交互的表单控件（如 、、、）提供统一的样式钩子。

例如，以下代码展示了 :enabled 与 :disabled 在运行时的精准样式控制：

切换第二项状态

.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 属性（或隐式禁用逻辑，如 在禁用 中）；
• 不要误认为 .useable 类可替代 :enabled：类名需手动维护，而 :enabled 是自动、声明式的，与 DOM 状态完全同步；
• 在可访问性（a11y）层面，:enabled/:disabled 样式配合 aria-disabled 和正确语义，能显著提升屏幕阅读器用户的操作感知。

总结：:enabled 是 CSS 中实现「状态驱动样式」的关键基础伪类。它让样式系统真正成为 UI 状态的镜像，而非静态快照——这是构建健壮、可扩展、无障碍表单体验不可或缺的一环。