:disabled是css伪类，用于选中具有disabled属性的表单元素（如button、input、textarea、select），并为其设置样式。通过定义背景色、文字颜色和光标等，可直观区分不可操作状态，提升用户体验。例如设置background-color: #f0f0f0、color: #999、cursor: not-allowed，使禁用元素呈现灰色外观和禁止光标。该选择器仅适用于支持disabled属性的表单控件，非表单元素即使添加disabled也不会被匹配，除非在fieldset[disabled]内。对立伪类:enabled可用于设置启用状态样式，两者常配合使用以明确交互状态。合理应用:disabled能增强表单可读性与界面友好性。
当需要为不可用状态的表单元素（如按钮、输入框）设置特定样式时，可以使用CSS中的 :disabled 伪类选择器。它能选中所有被设置为 disabled 属性的表单控件，并为其应用样式，提升界面的可读性和用户体验。
什么是:disabled选择器？
:disabled 是一个CSS伪类，用于匹配具有 disabled 属性的表单元素。这些元素通常无法被点击、聚焦或输入内容。常见的支持元素包括：
只要这些元素设置了 disabled="disabled" 或简写为 disabled，:disabled规则就会生效。
如何设置禁用状态的样式？
你可以通过自定义颜色、背景、光标等属性，让禁用状态更清晰可见。例如：
立即学习“前端免费学习笔记（深入）”；
input:disabled,
textarea:disabled,
button:disabled {
background-color: #f0f0f0;
color: #999;
border: 1px solid #ccc;
cursor: not-allowed;
}
这样，所有被禁用的输入框和按钮都会显示为灰色背景、浅色文字，并且鼠标悬停时出现“禁止”光标，直观提示用户当前不可操作。
结合HTML示例
以下是一个简单的HTML结构配合上述CSS的使用场景：
<input type="text" value="可编辑输入框"> <input type="text" value="不可编辑" disabled> <button>正常按钮</button> <button disabled>禁用按钮</button>
页面渲染后，“不可编辑”输入框和“禁用按钮”将自动应用 :disabled 定义的样式，视觉上与其他控件区分开。
注意事项
确保只对支持 disabled 属性的元素使用该伪类。像 div 或 span 这类非表单元素即使添加了 disabled 属性，也不会被 :disabled 匹配，除非它们位于可禁用上下文中（如在fieldset[disabled]内）。
另外，如果想针对启用状态设置样式，可使用对立伪类 :enabled，两者常成对使用以区分交互能力。
基本上就这些。合理使用 :disabled 能让表单状态一目了然，不复杂但容易忽略细节。
