disabled属性与:disabled伪类不同，前者是HTML属性触发浏览器默认禁用样式，后者需显式定义CSS规则；:disabled仅匹配真实存在的disabled属性，不匹配动态JS设置的中间状态，且需注意优先级、框架同步及IE兼容方案。
disabled 属性和 :disabled 伪类不是一回事
直接给按钮加 disabled 属性后，浏览器默认会灰掉、变透明、禁用交互——但这不是靠 :disabled 伪类实现的，而是 UA stylesheet（用户代理样式）的默认行为。如果你发现加了 disabled 却没变化，大概率是自定义样式里写了 button { opacity: 1; color: #000; } 这类全局重置，把默认禁用态覆盖掉了。
真正该做的是：显式用 :disabled 伪类接管样式控制，而不是依赖浏览器默认。
-
:disabled只匹配带有disabledHTML 属性的元素（<button disabled></button>、<input disabled>等），不匹配disabled="false"或 JS 动态设置element.disabled = false后又设为true的中间状态（除非属性真实存在） - 务必检查是否在 CSS 中用
!important错误地锁死了正常态颜色/背景，导致:disabled无法生效 - 部分 UI 库（如 Ant Design、Element Plus）会用
class="is-disabled"模拟禁用态，此时要用类选择器，而非:disabled
如何写可靠的 :disabled 样式规则
优先级和覆盖顺序很关键。别只写 button:disabled，要跟正常态规则保持同级权重，否则容易被覆盖。
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
}
button:disabled {
background-color: #6c757d;
color: #fff;
cursor: not-allowed;
opacity: 0.6;
}- 加上
cursor: not-allowed是必要交互提示，纯视觉灰化不够 - 避免只改
opacity，它会让整个按钮（包括文字、图标）一起变淡，可读性差；推荐用明确的禁用色（如#6c757d）+ 适度透明 - 如果按钮有
:hover或:active样式，记得在:disabled之后声明，否则悬停效果可能意外触发
React/Vue 中 disabled 状态不同步的常见原因
JSX 或模板里写了 disabled={isLoading}，但按钮样式没变——问题往往不在 CSS，而在 DOM 属性没真实渲染出来。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
立即学习“前端免费学习笔记（深入）”；
- React 中，
disabled是布尔属性，传null、undefined或false都不会渲染该属性，此时:disabled不匹配；必须确保值为true时，HTML 中真实存在disabled字符串属性 - Vue 中，
:disabled="isLoading"是正确的，但若用v-bind:disabled="isLoading ? '' : null"，空字符串仍会被视为存在属性，而null则不会——建议统一用布尔值绑定 - 检查浏览器开发者工具 Elements 面板，确认禁用时按钮标签上是否真有
disabled字样，没有就说明框架层没正确同步
需要兼容老版本 IE 时的替代方案
:disabled 在 IE9+ 支持良好，但 IE8 及以下完全不支持。如果还必须兼容，得放弃伪类，改用 class 控制：
<button class="btn btn--primary" :class="{ 'btn--disabled': isSubmitting }">
提交
</button>.btn--disabled {
background-color: #6c757d;
color: #fff;
cursor: not-allowed;
opacity: 0.6;
}
/* 同时禁用 JS 交互 */
.btn--disabled {
pointer-events: none;
}-
pointer-events: none是关键补丁，防止 IE8 下虽然视觉禁用但还能点中 - 不要只依赖 class 名称暗示状态，业务逻辑中也要同步控制
onclick回调是否执行 - 现代项目基本不用考虑 IE8，但如果接手遗留系统，这个 class 方案比 hack 伪类更可控
实际项目里最常出问题的，是开发时只测了 JS 状态切换，却没打开 Elements 面板看 HTML 属性是否真实存在——:disabled 匹配的是 DOM 属性，不是 React/Vue 的响应式数据。
