:disabled伪类不生效主因是元素未真正禁用——仅button、input等原生表单控件支持该伪类；div、自定义组件加disabled属性无效，须透传至合法标签或改用[aria-disabled="true"]。
为什么:disabled伪类有时不生效？
浏览器对:disabled的支持很稳定，但常见失效不是语法问题，而是元素本身没被真正禁用。比如用class="disabled"模拟禁用、或只加disabled属性却没写在<button></button>、<input>、<select></select>这些原生可禁用元素上。自定义组件（如<div role="button">）不会响应<code>:disabled，必须用[aria-disabled="true"]配合样式。
- 只有表单控件原生支持
:disabled：按钮、输入框、下拉框、复选框等 -
disabled是布尔属性，写disabled或disabled="disabled"效果一样，但不能写disabled="false" - Vue/React中动态绑定时，别用
:disabled="someVar === false"，应直接用:disabled="!someVar"或:disabled="isDisabled"
怎么让禁用按钮看起来更“可信”？
纯灰度+透明度降低（如opacity: 0.5）容易被误认为加载中或失效，建议组合使用：
- 背景色变浅但保留色相（比如正常按钮
background: #007bff，禁用时用background: #cdd6e0） - 边框颜色同步变淡（避免深边框配浅背景）
- 文字颜色用
color: #6c757d这类中性灰，别用#999——它在深色模式下可能看不见 - 移除
cursor: pointer，改用cursor: not-allowed（部分旧版Safari需加-webkit-appearance: none才能生效）
button:disabled {
background-color: #cdd6e0;
border-color: #b8c2cc;
color: #6c757d;
cursor: not-allowed;
opacity: 1; /* 覆盖可能存在的全局opacity设置 */
}和:hover、:active连用时顺序很重要
CSS伪类的声明顺序直接影响是否生效。如果把:disabled写在:hover后面，鼠标悬停时禁用按钮仍会触发:hover样式（除非:hover规则里显式重置了所有属性）。
- 正确顺序（LVHA原则）：
:link→:visited→:hover→:active→:disabled - 更稳妥的做法是把
:disabled单独提出来，放在最后，并用!important覆盖其他状态（仅限必要场景，比如第三方UI库样式干扰严重时） - 注意：
button:disabled:hover在Chrome/Firefox中合法但无实际意义（禁用元素不触发hover），Safari曾有兼容问题，建议避免这种写法
深色模式下:disabled需要单独适配吗？
需要。系统深色模式切换后，:disabled的默认颜色（如graytext）可能和背景对比不足。别依赖浏览器默认值：
立即学习“前端免费学习笔记（深入）”；
- 使用
@media (prefers-color-scheme: dark)包裹禁用样式 - 深色背景下禁用按钮文字不宜过浅（比如
#e0e0e0比#ffffff更安全） - 避免用
filter: grayscale(1)——它会让整个按钮变灰，失去色彩层次，且影响可访问性（色觉障碍用户更难区分状态）
@media (prefers-color-scheme: dark) {
button:disabled {
background-color: #343a40;
border-color: #495057;
color: #6c757d;
}
}禁用状态的视觉反馈是用户操作链的最后一环，最容易被当成“死区”忽略；颜色、光标、焦点样式哪怕差一点，都会让人怀疑功能是否真的卡住了。
