:disabled伪类用于选中并样式化带有disabled属性的表单元素，使其不可交互且外观可自定义。它匹配input、textarea、button等禁用控件，常用于调整背景色、文字颜色和透明度以提升界面可读性。与:enabled伪类相对，二者可用于区分可操作与不可操作状态。例如，禁用按钮可通过灰色调和not-allowed光标提示用户无法点击。需注意仅表单元素支持该伪类，普通标签如div无效，且必须正确添加disabled属性才能生效。现代浏览器普遍支持，合理使用有助于清晰表达表单状态。
在CSS中，:disabled 是一个常用的伪类选择器，用于选中处于“禁用”状态的表单元素。当表单控件（如输入框、按钮、下拉菜单等）被设置为 disabled 属性时，用户无法与其交互，而通过 :disabled 伪类，我们可以自定义这些不可操作元素的外观样式，提升界面可读性和用户体验。
什么是:disabled伪类？
:disabled 会匹配所有带有 disabled 属性的表单元素。这类元素默认是灰色、不可点击、不可聚焦的。浏览器会应用默认样式，但我们可以通过CSS覆盖这些样式。
常见支持 :disabled 的表单元素包括：
- input
- textarea
- select
- option
- button
- fieldset
如何使用:disabled设置样式
你可以直接在CSS中使用 :disabled 来为目标元素添加特定样式。例如，改变背景色、文字颜色或边框样式，让用户更直观地识别出哪些控件不可用。
立即学习“前端免费学习笔记（深入）”；
示例代码：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
input:disabled {
background-color: #f2f2f2;
color: #999;
border: 1px solid #ccc;
opacity: 0.7;
}
这个规则会让所有被禁用的输入框呈现浅灰背景、较暗的文字，并略微降低透明度，视觉上更“弱化”。
与:enabled的区别
与 :disabled 相对的是 :enabled 伪类，它匹配所有可以交互的表单元素。这两个伪类常被用于对比样式设计。
例如，你可能希望启用的按钮更醒目：
button:enabled {
background-color: #007bff;
color: white;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
这样用户将能通过颜色和鼠标指针的变化判断按钮是否可点击。
注意事项和兼容性
:disabled 在现代浏览器中支持良好，包括Chrome、Firefox、Safari、Edge等。但需注意以下几点：
- 只有表单相关元素才支持 disabled 属性和 :disabled 伪类。
- 普通元素如 div 或 span 不支持该属性，因此 :disabled 对它们无效。
- 在HTML中正确添加 disabled 属性才能触发该伪类：
<input type="text" disabled>
基本上就这些。合理使用 :disabled 能让表单状态更清晰，帮助用户理解当前界面的可操作区域。不复杂但容易忽略细节。
