:disabled 和 :enabled 伪类用于根据表单元素状态设置样式，提升可读性与交互体验。1. :disabled 匹配禁用元素，常用于灰化输入框、按钮等，示例为设置背景色#f2f2f2、文字色#999、不可用光标；2. :enabled 匹配可交互元素，可用于突出可操作控件，如按钮启用时显示蓝色背景并支持悬停变深；3. 实际场景中，注册表单提交按钮初始禁用，未勾选条款时不可点击，通过 JavaScript 移除 disabled 后 :enabled 样式生效，实现视觉反馈自动化，无需额外 class，兼容性好且减少误操作。
在表单开发中，CSS 伪类 :disabled 和 :enabled 可以帮助我们根据表单元素的启用状态来设置不同的样式，提升用户体验和界面可读性。
:disabled 伪类
这个伪类匹配所有被禁用的表单元素。当一个输入框、按钮或下拉菜单设置了 disabled 属性时，浏览器会自动应用 :disabled 的样式规则。
- 常用于灰化不可操作的控件，让用户直观识别哪些元素不能交互
- 适用于 input、textarea、select、button 等表单组件
- 例如：将禁用的输入框背景设为浅灰色，文字颜色变淡
input:disabled {
background-color: #f2f2f2;
color: #999;
border: 1px solid #ccc;
cursor: not-allowed;
}
:enabled 伪类
与 :disabled 相反，:enabled 匹配所有处于可交互状态的表单元素。虽然大多数元素默认是启用的，但显式使用该伪类有助于统一视觉反馈。
- 可用于强调当前可编辑或可点击的控件
- 配合 JavaScript 动态切换状态时特别有用
- 比如给可点击按钮添加悬停效果，而禁用按钮不响应 hover
button:enabled {
background-color: #007bff;
color: white;
cursor: pointer;
}
button:enabled:hover {
background-color: #0056b3;
}
实际应用场景
在注册表单中，提交按钮初始为 disabled（如用户未勾选同意条款），此时用 :disabled 让按钮看起来不可点。一旦用户完成必要操作，JavaScript 移除 disabled 属性，:enabled 样式生效，按钮恢复可点击外观。
立即学习“前端免费学习笔记（深入）”；
- 提高界面可用性，减少误操作
- 无需额外 class 控制，样式与状态自动绑定
- 支持现代浏览器，兼容性良好
