应使用 :disabled 伪类控制禁用元素样式，它自动匹配 disabled 属性状态，语义化强、易维护，支持 button、input、select、textarea 等原生元素，但对自定义组件无效；需组合 opacity、cursor、outline 等属性增强可感知性，并注意层叠优先级与兼容性。
禁用按钮时，用 :disabled 选择器可以精准控制样式，避免影响正常状态的按钮外观。
区分禁用与普通按钮的关键是状态，不是类名
按钮是否禁用由 disabled 属性决定（如 ），CSS 的 :disabled 伪类会自动匹配该状态，无需额外加 class。这样更语义化，也便于维护。
- ✅ 正确写法：
button:disabled { opacity: 0.5; cursor: not-allowed; } - ❌ 不推荐：给禁用按钮加
class="disabled"再写.disabled样式（易遗漏、冗余、违反 HTML 语义）
:disabled 能匹配所有原生可禁用元素
不仅限于 ，还支持 （text、number、checkbox 等）、、 等。
- 例如统一处理：
input:disabled, select:disabled, button:disabled { background-color: #f5f5f5; color: #999; } - 注意：
:disabled对自定义组件（如用div模拟的按钮）无效，需配合aria-disabled和额外类名处理
禁用样式建议兼顾视觉与交互反馈
仅改颜色或透明度不够直观，应组合多个属性增强可感知性：
立即学习“前端免费学习笔记（深入）”；
- 降低不透明度（如
opacity: 0.6） - 修改光标为
not-allowed，提示不可点击 - 禁用默认高亮/焦点样式（可加
outline: none，但需确保无障碍替代方案） - 避免纯靠颜色区分（如只变灰），可叠加文字修饰（如加
text-decoration: line-through小字提示）
注意优先级和浏览器兼容性
:disabled 是伪类，权重与类选择器相同（0,1,0），若和类名冲突，按 CSS 层叠规则生效。
