:disabled伪类常失效是因为它仅匹配原生可禁用元素且要求DOM存在disabled属性；应优先使用[disabled]属性选择器，并确保框架中透传disabled属性到原生标签。
为什么 :disabled 伪类有时不生效
直接写 button:disabled { opacity: 0.5; } 看似合理，但实际中常失效——根本原因是：:disabled 只匹配原生可禁用的表单元素（button、input、select、textarea），且要求 DOM 上真实存在 disabled 属性（不是仅靠 JS 添加 class 模拟）。若你用的是自定义组件（如 <my-button></my-button>）或 React/Vue 中通过 props.disabled 渲染但未透传到原生标签，:disabled 完全不会触发。
用属性选择器 [disabled] 替代 :disabled
更可靠的方式是匹配属性本身，而非伪类状态。它不依赖元素类型，只要 HTML 属性存在就生效，兼容性也更好（IE8+ 支持）。
-
[disabled]匹配任意含disabled属性的元素，包括自定义标签 - 若需限定范围，可组合使用：例如
button[disabled], input[disabled], .custom-btn[disabled] - 注意：JS 动态设置
el.disabled = true不会自动添加disabled属性，必须显式调用el.setAttribute('disabled', '')或用el.toggleAttribute('disabled', true)
button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
.custom-control[disabled] {
opacity: 0.4;
cursor: not-allowed;
background-color: #f5f5f5;
color: #999;
}
React/Vue 场景下确保属性透传
框架组件常把 disabled 当作 prop 处理，但默认不渲染到 DOM。必须手动绑定：
- React：用
{...props}或显式写disabled={disabled}，并确保它最终落到原生标签上 - Vue：用
v-bind="$attrs"（2.x）或v-bind="$$attrs"（3.x），或在defineProps后透传disabled - 避免只靠 class 判断：比如
className={disabled ? 'disabled' : ''}→ 此时[disabled]和:disabled都无效
慎用 :not(:disabled) 做启用样式
看似方便，但容易覆盖失败。例如：
立即学习“前端免费学习笔记（深入）”；
button {
background: blue;
}
button:not(:disabled):hover {
background: darkblue;
}
问题在于：如果按钮被禁用，:not(:disabled) 不匹配，但其他规则（如全局 button）仍生效，导致禁用态颜色和启用态基础色一样。更稳妥的是明确写出启用态 + 禁用态：
button {
background: blue;
}
button:disabled,
button[disabled] {
background: #ccc;
cursor: not-allowed;
}
禁用样式优先级要足够高，且必须覆盖所有可能影响外观的原始规则。实际项目里漏掉 [disabled] 是最常见断点。
