:disabled伪类可直接控制原生表单控件禁用样式，无需JS或额外class；自定义组件需配合ARIA属性和CSS类；注意选择器优先级、可访问性（对比度、pointer-events等）及浏览器兼容性。
直接用 :disabled 伪类就能控制禁用状态的样式，不需要 JavaScript 干预，也不用额外加 class。
确保元素原生支持 disabled 属性
只有表单控件（如 、、、）才原生支持 disabled 属性和 :disabled 伪类。自定义组件（比如 div 模拟的按钮）不会响应 :disabled，除非你用 role="button" + aria-disabled="true" 并配合额外 CSS 类手动控制。
- ✅ 正确：
- ❌ 无效：
disabled对 div 是无意义的 HTML 属性）
写对选择器优先级，避免被覆盖
很多项目里禁用样式没生效，其实是其他规则（比如全局重置、组件库默认样式、内联 style）优先级更高，把 :disabled 覆盖掉了。
- 检查开发者工具中该元素的 computed styles，看
:disabled规则是否被划掉 - 必要时提升优先级：比如用
button:disabled替代:disabled，或加!important（仅限兜底，不推荐滥用） - 避免用太宽泛的选择器，例如
*:disabled容易被后续更具体的规则压倒
禁用状态下仍需可访问性支持
仅改颜色或透明度可能让残障用户难以识别禁用状态。建议组合使用：
立即学习“前端免费学习笔记（深入）”；
- 降低 opacity（如
opacity: 0.5;） - 改变 pointer-events（
pointer-events: none;防止误点，但注意这会影响焦点行为） - 补充视觉提示：加边框虚线、移除阴影、禁用 hover/focus 效果
- 确保对比度达标（禁用文本与背景的对比度 ≥ 4.5:1）
特殊场景：复选框/单选按钮的禁用样式
input[type="checkbox"]:disabled + label 这类组合选择器很常用，但要注意：
- 原生 checkbox/radio 的禁用样式浏览器差异大（尤其 Safari 对
:disabled下的accent-color支持有限） - 推荐用自定义伪元素（
::before/::after）+input:disabled控制外观，隐藏原生控件再重绘 - 别忘了同步处理
label文字的禁用态（比如input:disabled + label { color: #999; cursor: not-allowed; }）
基本上就这些。只要元素合法、选择器有效、优先级够用，:disabled 是最轻量也最可靠的禁用样式方案。
