为何默认可用的<input>元素仍需使用:enabled伪类？

首先要明确：:enabled是状态伪类，它的核心价值不是处理元素的“默认可用”初始状态，而是用来精准匹配所有处于可用状态的表单元素（包括<input>、<button>、<select>等），并自动响应状态变化。它和元素默认可用状态的核心差异主要体现在这几个方面：

1. 响应动态状态切换，无需手动修改类名 #

表单元素的可用状态往往不是一成不变的——比如通过JS动态给<input>添加/移除disabled属性时，:enabled会自动匹配元素的当前状态：

• 当元素从disabled切换回可用状态时，:enabled的样式会自动生效；
• 当元素被设置为disabled时，:disabled样式会接管（就像你代码里的红色背景）。
  如果不用伪类，你就得手动给可用元素添加/移除样式类，代码冗余且容易出错。

2. 统一管理所有可用表单元素的样式 #

浏览器对表单元素有默认样式，:enabled可以帮你一次性重置或设置所有可用状态表单元素的样式，不用给每个元素单独加类。比如你代码里的:enabled { background: green; }，如果去掉.useable类，所有默认可用的<input>都会显示绿色背景，替代浏览器默认的白色。

3. 和:disabled形成明确的状态对比 #

:enabled通常和:disabled配对使用，给用户清晰的视觉反馈：可用元素用绿色，不可用用红色（如你代码所示），这种状态区分是默认样式做不到的——默认状态下，可用和不可用的表单元素视觉差异很弱，用户很难快速识别。

结合你的代码示例分析 #

你的HTML里<input class="useable" type="text">默认可用，此时.useable类的栗色背景会生效（因为类选择器优先级比:enabled伪类高）。但如果这个输入框被JS动态设置为disabled，它会立刻变成红色背景；当移除disabled属性回到可用状态时，只要.useable类还在，依然是栗色，但如果没有这个类，就会自动应用:enabled的绿色背景。这正是状态伪类的优势：样式跟着元素状态走，不用手动干预。

内容的提问来源于stack exchange，提问作者Emin Altan