在CSS中，:enabled是一个伪类选择器，属于属性选择器的一种特殊形态，用来选中当前处于启用状态的用户界面元素。它主要面向带有disabled属性的表单类标签，当元素没有disabled或者disabled=false时，:enabled就会生效。理解它的适用边界和书写方式，能帮我们在不写JavaScript的情况下完成很多交互样式的区分。
一、:enabled的基本语法与匹配规则
:enabled的写法非常直接，就是冒号加enabled。它通常附着在具体的表单标签名后面，也可以单独作为通用选择器使用，但单独使用意义不大，因为页面里大部分非表单元素本身也没有禁用概念。规范明确，:enabled只匹配支持disabled属性的元素，包括button、input、select、textarea、optgroup、option等。
需要注意，如果给一个div写上disabled属性，:enabled是不会匹配它的，因为div在HTML语义里不属于可禁用控件。这也是很多初学者容易踩的坑，以为只要加个disabled就能用:enabled控制样式，结果完全没反应。下面用一段代码展示正确用法。
<form> <input type="text" class="field" placeholder="可用输入框"> <input type="text" class="field" disabled placeholder="禁用输入框"> <button type="submit">提交</button> <button type="button" disabled>不可点</button> </form>
二、通过案例看:enabled的样式控制
我们构建一个登录表单，包含用户名、密码以及两个按钮。希望可用输入框有白色背景和黑色边框，禁用输入框变灰且文字淡去；可用按钮显示主题色，禁用按钮降低透明度。借助:enabled和:disabled，纯CSS即可实现。
下面的样式中，input:enabled选中所有未禁用的input，设置正常外观；input:disabled则反向处理。button同理。这样当后端动态给某个字段加disabled时，前端样式自动跟随变化，不需要额外切换class。
/* 可用输入框样式 */
input:enabled {
background-color: #ffffff;
border: 1px solid #3b82f6;
color: #111827;
padding: 8px;
}
/* 禁用输入框样式 */
input:disabled {
background-color: #f3f4f6;
border: 1px solid #d1d5db;
color: #9ca3af;
padding: 8px;
}
/* 可用按钮 */
button:enabled {
background-color: #3b82f6;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
}
/* 禁用按钮 */
button:disabled {
background-color: #93c5fd;
color: #eff6ff;
border: none;
padding: 8px 16px;
cursor: not-allowed;
}
将上述CSS套用在前面HTML结构上，用户在浏览器里会直观看到两个输入框和两个按钮呈现不同状态。如果后续用JavaScript把禁用输入框的disabled去掉，样式会立刻变为可用样式，过程无闪烁、无脚本参与。
三、:enabled与JS状态管理的对比
传统做法里，开发者习惯用JS监听状态，然后手动增删class来控制样式。这种方式逻辑分散，样式和状态绑定在脚本中，后期调整要同时改JS和CSS。而:enabled把状态判断交给浏览器原生伪类，CSS自己认识元素的disabled属性，维护成本更低。
不过:enabled也有局限。它只能识别标准disabled属性，无法识别自定义的业务状态，比如“表单校验中”这种非disabled的临时锁定。遇到复杂状态机，仍需要配合data属性选择器，例如[date-lock="true"]来补充。因此实际项目中，:enabled适合处理最基础的可用与禁用区分，更高阶状态建议结合属性选择器使用。
四、常见误区与浏览器兼容
有人会把:enabled写成[enabled]，这是错误的。方括号属性选择器用于匹配存在的HTML属性，而enabled并不是写在标签上的属性，它是元素运行时的状态，必须用伪类冒号语法。另外，IE9及以上、所有现代浏览器都支持:enabled，兼容性良好，可以放心用于生产环境。
还有一个细节：option和optgroup也支持:enabled，在下拉框里动态禁用某些选项时同样生效。如果页面里有自定义组件库模拟的select，由于不是原生表单标签，:enabled自然无效，此时需要组件自身暴露状态class。明确原生与组件的边界，才能少走弯路。
五、完整可运行示例
下面给出一个完整HTML文件，直接保存后用浏览器打开即可观察:enabled效果。点击按钮通过原生JS移除disabled，能看到样式实时变化，印证伪类选择器的响应能力。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>:enabled示例</title>
<style>
input:enabled {
background: #fff;
border: 1px solid #3b82f6;
padding: 6px;
}
input:disabled {
background: #eee;
border: 1px solid #ccc;
color: #999;
padding: 6px;
}
button:enabled {
background: #3b82f6;
color: #fff;
padding: 6px 12px;
}
button:disabled {
background: #93c5fd;
color: #eff6ff;
padding: 6px 12px;
}
</style>
</head>
<body>
<input id="name" placeholder="姓名">
<input id="code" disabled placeholder="验证码(禁用)">
<button id="btn" onclick="document.getElementById('code').disabled=false">启用验证码</button>
</body>
</html>
通过这个案例可以确认，:enabled是处理表单可用态的轻量方案。只要理清它匹配的标签范围和伪类写法，就能在项目中替代一部分JS样式逻辑，让代码更简洁清晰。