:disabled样式失效主因是CSS优先级被覆盖，应通过提升选择器权重（如类+伪类组合）、检查开发者工具中规则是否被划掉或未匹配、避免框架默认样式干扰来解决，慎用!important。
当 :disabled 元素的样式无法生效，通常不是伪类本身失效，而是 CSS 优先级被其他规则覆盖了。直接加 !important 虽能“强行”生效，但属于治标不治本，还可能埋下维护隐患。更稳妥的方式是提升选择器权重，或检查样式是否被其他更具体的选择器压制。
确认是否真被覆盖，而非未匹配
浏览器开发者工具（F12）中选中该禁用元素，查看“Computed”面板里的 color、background 等属性实际值，以及左侧“Styles”中哪些规则被划掉（strikethrough）。如果 :disabled 规则显示为灰色或带删除线，说明它被更高优先级规则覆盖；如果根本没出现，可能是选择器写错（比如误写成 input:disabled 却作用于 button）。
用更具体的选择器提高优先级
比起单纯用 input:disabled，可叠加类名、父容器或标签组合：
-
.form-control input:disabled—— 增加一个类选择器，权重 +10 -
button.btn-primary:disabled—— 同时限定标签和类，权重 +20 -
#user-form button:disabled—— 加 ID 选择器，权重 +100（慎用，ID 过重难复用）
优先用“类+伪类”组合，既可控又易维护。
立即学习“前端免费学习笔记（深入）”；
避免意外继承或重置干扰
某些 CSS 框架（如 Bootstrap、Tailwind）或重置样式（normalize.css）会对 :disabled 做默认处理，且可能使用高权重规则。例如 Bootstrap 的 btn:disabled 样式带 !important。此时建议：
- 在自定义样式表中置于框架之后加载
- 复制框架中对应规则的完整选择器，再在其后覆盖（如
.btn.btn-primary:disabled→.btn.btn-primary.my-theme:disabled） - 用
all: unset或appearance: none清除原生/框架默认样式后再重写
谨慎使用 !important
仅在以下情况考虑加 !important：
- 第三方库样式无法修改，且必须覆盖
- 内联样式（
style="..."）导致外部:disabled失效，而你又不能改 HTML
写法示例：button:disabled { background: #ccc !important; }。注意：同一声明中多个 !important 仍按优先级比拼，不是“谁最后谁赢”。
