为什么CSS :disabled伪类在自定义组件上失效及其解决方法？-css教程-PHP中文网

:disabled伪类仅匹配原生表单控件（button、input、select、textarea）且要求dom存在disabled属性；自定义组件需透传disabled到内部原生标签，否则不生效，推荐统一使用[disabled]属性选择器确保兼容性与可靠性。

为什么css :disabled伪类在自定义组件上失效及其解决方法？

自定义组件上:disabled不匹配的根源

浏览器只对原生表单控件（button、input、select、textarea）实现:disabled伪类逻辑；div、span或自定义标签如<my-button></my-button>即使写了disabled属性，也不被识别为可禁用元素，CSS引擎直接跳过匹配。

:disabled是规范级伪类，不是“只要属性存在就生效”的通用机制
自定义组件若未透传disabled到内部原生button或input，外部my-button:disabled规则永远不触发
React中写<mybutton disabled></mybutton>，但组件内部没把disabled绑定到原生button上，等同于没禁用

React/Vue中确保disabled透传的关键操作

框架里“传了props”不等于“透传到了DOM”，必须显式落到原生标签上：

React：在自定义组件内部，用...restProps或明确解构disabled并赋给button
```
<button disabled>{children}</button>
```
Vue：必须用:disabled="isDisabled"（带冒号），而非v-bind:class="{disabled: isDisabled}"
Svelte：用bind:disabled或直接disabled={isDisabled}
检查最终渲染的HTML：打开开发者工具，确认disabled属性真实出现在button或input标签上，而不是只挂在自定义组件根节点

替代方案：用[disabled]属性选择器更可靠

[disabled]匹配的是DOM属性是否存在，不依赖元素类型或是否原生支持禁用：

支持任意标签：my-button[disabled]、div[disabled]、.btn[disabled]都有效
兼容IE8+，且不受JS设置el.disabled = true却不更新attribute的影响

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载
但注意：JS动态改el.disabled = true不会自动添加disabled属性，需配合el.toggleAttribute('disabled', true)或el.setAttribute('disabled', '')
不要混用：button:disabled, button[disabled]冗余且增加维护成本
若项目需支持旧版WebKit（如Safari [disabled]比:disabled:focus更稳