优先用:disabled，它更符合语义且能响应JS动态禁用状态；需同时声明button:disabled和button[disabled]以覆盖SSR与动态渲染场景，显式设置cursor: not-allowed、颜色组合及pointer-events: none确保全端兼容。
按钮禁用时的样式该用 :disabled 还是 [disabled]？
两者都能生效，但语义和兼容性有差别：:disabled 是伪类，匹配所有被禁用的表单控件（包括 button、input、select），而 [disabled] 是属性选择器，只匹配显式写了 disabled 属性的元素。实际开发中优先用 :disabled，它更符合语义，且能覆盖 JS 动态设置 disabled = true 后的状态（现代浏览器均支持）。
注意：IE9+ 支持 :disabled，若需兼容 IE8，只能用 [disabled]，但 IE8 下 JS 设置 disabled 属性后，[disabled] 选择器不会自动重匹配——必须手动操作 DOM 属性（如 el.setAttribute('disabled', '')）才能触发样式更新。
禁用按钮的视觉反馈要避免纯灰度处理
单纯把按钮设为 opacity: 0.5 或 color: #999 不够可靠：用户可能误判是否可交互，色弱用户难以分辨，且部分屏幕阅读器仍会播报“可点击”。真正有效的做法是组合控制：
- 用
pointer-events: none彻底屏蔽鼠标事件（注意：这不影响键盘焦点，若需移除焦点能力，还得加tabindex="-1"） - 降低对比度但保留足够可读性，比如背景用
#e0e0e0、文字用#666，而非全灰 - 移除悬停/激活态样式（删掉
:hover和:active规则，或用&:not(:disabled):hover排除）
示例：
立即学习“前端免费学习笔记（深入）”；
button:disabled {
background-color: #e0e0e0;
color: #666;
cursor: not-allowed;
pointer-events: none;
}
React/Vue 中动态禁用按钮时，CSS 为何不生效？
常见原因是组件未正确绑定 disabled 属性，或用了错误的绑定方式。比如 React 中写成 disabled={isSubmitting ? 'disabled' : null}，会导致属性值为字符串 "disabled" 而非布尔值 true，此时 :disabled 伪类不匹配（只有 disabled 属性存在且值为任意非空字符串时，[disabled] 才匹配，但语义不符）。
正确写法：
- React：
disabled={isSubmitting}（直接传布尔值） - Vue：
:disabled="isSubmitting"（v-bind 绑定布尔值） - 原生 HTML：
<button disabled>或<button disabled="disabled">（后者兼容性更好）
另外，若用 CSS-in-JS（如 styled-components），确保禁用状态的样式规则在组件渲染时被注入，而不是仅依赖静态类名。
禁用状态需要同时适配键盘与屏幕阅读器
仅靠 CSS 无法让辅助技术感知禁用状态。必须确保 HTML 层面真实存在 disabled 属性，否则 NVDA、VoiceOver 等工具不会播报“已禁用”，用户可能反复尝试按键或 Tab 切换。
额外建议：
- 禁用按钮不要设
tabindex="0"，否则键盘用户仍能聚焦但无法操作，造成困惑 - 若逻辑上需保留焦点能力（如展示提示），改用
aria-disabled="true"+tabindex="0"，再配合 JS 阻止Enter/Space事件 - 避免对
:disabled元素使用aria-hidden="true"，这会让屏幕阅读器完全忽略它
最简稳妥路径：HTML 层设 disabled 属性，CSS 用 :disabled 控制样式，JS 层不干预焦点逻辑。
