按钮禁用状态加 :disabled 没反应，主因是目标元素非原生可禁用控件（如 div/span），仅 button/input/select/textarea 支持 disabled 属性和 :disabled 伪类；应优先使用语义化原生按钮并正确设置 disabled 布尔属性。
按钮禁用状态为什么加了 :disabled 却没反应？
常见原因是目标元素不是原生可禁用的表单控件。只有 <button></button>、<input>、<select></select>、<textarea></textarea> 这类原生支持 disabled 属性的元素，才能被 :disabled 伪类匹配。如果用 <div> 或 <code><span></span> 模拟按钮，即使手动加了 disabled="true" 属性，浏览器也不会识别——它不是有效属性，CSS 也完全不响应。
实操建议：
- 优先使用语义化原生按钮：
<button type="button">提交</button> - 禁用时设置
disabled属性（布尔属性，无需赋值）：<button disabled>提交</button> - 避免给非表单元素添加
disabled属性并指望:disabled生效
:disabled 样式写法和常见失效场景
样式本身写法简单，但容易因层叠或选择器权重出问题。例如 button:disabled 可能被更具体的选择器（如 .btn-primary:hover）覆盖，导致禁用后仍显示悬停态颜色。
实操建议：
- 确保选择器足够明确：用
button:disabled而非泛泛的:disabled，避免意外匹配到其他禁用元素 - 提高权重应对覆盖：加类名或使用
!important（仅当必要时）：.btn:disabled { opacity: 0.5 !important; } - 禁用态应移除交互反馈：显式重置
cursor: not-allowed、清除box-shadow、禁用过渡动画（transition: none）
禁用按钮的视觉反馈要兼顾可访问性
单纯调低透明度或改灰，对色觉障碍用户可能无法识别。WCAG 要求禁用态需有足够对比度变化，且不能仅依赖颜色区分。
实操建议：
- 叠加多个视觉信号：降低透明度 + 添加
cursor: not-allowed+ 修改边框/背景色 + 禁用文字阴影 - 检查对比度：禁用文本与背景的对比度仍应 ≥ 4.5:1（可用浏览器 DevTools 的无障碍面板验证）
- 不要仅靠颜色判断状态：避免“绿色启用 / 红色禁用”这种单一维度设计
JavaScript 动态禁用时，样式没更新？
这是最常被忽略的一环：JS 设置 element.disabled = true 是生效的，但若通过 setAttribute('disabled', 'true')，部分老版本浏览器（如 IE）可能不触发样式重绘；更隐蔽的是，React/Vue 等框架中直接修改 DOM 属性，可能绕过框架的响应式机制，导致视图未同步。
实操建议：
- JS 中统一用属性赋值：
btn.disabled = true（推荐）或btn.setAttribute('disabled', '')（空字符串即可） - 在 React 中，应通过 state 控制
disabled属性，而非直接操作 DOM - 调试时用 DevTools 查看元素是否真实带有
disabled属性（不是 class 名含 disabled）
