button:disabled对自定义组件无效的根本原因是：它仅匹配原生支持禁用语义的HTML元素（如button、input等），而自定义组件若未将disabled属性透传至内部原生button标签，DOM中便不存在disabled属性，导致伪类和属性选择器均不生效。
button:disabled 为什么对自定义组件无效
根本原因就一个：:disabled 是原生伪类，只匹配浏览器原生支持禁用语义的 HTML 元素，比如 <button>、<input>、<select>、<textarea> 和 <fieldset>。你写的 <MyButton disabled> 或 <div class="btn" disabled>，哪怕 DOM 上真有 disabled 属性，浏览器也**不认为它是可禁用的表单控件**，直接忽略 :disabled 匹配逻辑。
React/Vue 里 disabled={true} 却没样式，问题出在哪
框架组件常把 disabled 当作普通 prop 接收，但没透传到内部真实渲染的 <button> 标签上。结果是：JS 层面组件“知道”自己该禁用，DOM 里却找不到 disabled 属性，button:disabled 和 button[disabled] 都不生效。
- 检查 DevTools 中最终渲染出的
<button>是否带disabled属性（不是父 wrapper，不是自定义标签） - React 中确保写成
<button disabled={isDisabled}>，而不是只在组件顶层接收disabled后没往下传 - Vue 中要用
v-bind:disabled="isDisabled"（带冒号），否则传的是字符串字面量"true"，不是布尔值 - UI 库如 Ant Design、Element Plus 的 Button 组件，需查文档确认是否支持
disabled透传；部分封装过深的组件默认不透传
怎么让禁用样式真正生效（可靠写法）
别赌 :disabled 覆盖所有场景。生产环境必须同时写两套选择器，且优先级要压得过其他规则：
- 显式声明
button:disabled, button[disabled]—— 前者响应 JS 属性变更（如el.disabled = true），后者捕获 HTML 属性存在（如 SSR 渲染或setAttribute） - 避免泛写
:disabled，它会意外命中input:disabled或select:disabled，干扰按钮样式 -
button[disabled]权重只有 10，容易被.btn-primary（权重 10）或button.btn（权重 11）覆盖，建议加类名提升权重，例如.btn[disabled] - 禁用态必须同步设置
cursor: not-allowed，浏览器不会自动改光标，漏掉这行用户会误判可操作性
替代方案：什么时候该放弃 :disabled
当你的按钮不是原生 <button>（比如用 <div role="button"> 实现），或者禁用逻辑完全由 JS 控制（如 pointer-events: none + 状态变量），:disabled 就彻底失效。这时唯一可靠路径是：
立即学习“前端免费学习笔记（深入）”；
- 统一用类名控制，例如
button.is-disabled - JS 切换
el.classList.toggle('is-disabled', isDisabled) - 配合语义层：非表单元素必须加
aria-disabled="true"，否则屏幕阅读器无法识别状态 - 视觉上别只靠
opacity或filter: grayscale()，老版 Safari 对后者渲染异常（全黑），且不改光标、不阻焦点；推荐组合opacity: 0.6; color: #999; background-color: #f5f5f5; cursor: not-allowed;
真正麻烦的从来不是写几行 CSS，而是确保 DOM 层、CSS 层、行为层三者状态严格一致——少一环，键盘用户或读屏器就会遇到“看着灰了，却还能 Tab 进去并听到‘可点击’”这种问题。
