:disabled伪类不生效的根本原因是按钮未真正禁用——仅靠class或style模拟无效，必须使用原生disabled属性；react/vue中需确保该属性透传至button/input等原生标签，否则伪类无法匹配。
为什么:disabled伪类不生效？检查按钮是否真被禁用
很多情况下按钮看着灰了，但:disabled样式没触发，根本原因是按钮没真正进入禁用状态。HTML中只有 <button disabled></button>、<input disabled> 这类原生禁用属性才会触发该伪类；用class="disabled"或style="opacity:0.5"手动模拟，:disabled完全不会匹配。
实操建议：
- 确保使用原生
disabled属性，而不是仅靠CSS类控制状态 - React/Vue等框架中，别只写
disabled={isDisabled}却忘了绑定到原生属性（如Vue要写:disabled="isDisabled"，不是v-bind:class="{disabled: isDisabled}"） - 动态启用/禁用时，用
element.disabled = true/false，别只改className
怎么让:disabled的灰度更符合设计预期？别只依赖默认样式
浏览器对:disabled按钮的默认渲染差异大：Chrome可能只降透明度，Firefox可能加灰阶滤镜，Safari甚至保留高亮色。想统一效果，必须显式覆盖。
实操建议：
- 用
opacity+filter: grayscale()组合，比单用opacity更接近“置灰”语义 - 禁用状态下移除
cursor: pointer，避免误导用户可点击 - 慎用
background-color: #ccc硬编码——深色主题下会违和，优先用background-color: var(--disabled-bg, #eee) - 示例：
button:disabled { opacity: 0.6; filter: grayscale(0.8); cursor: not-allowed; }
:disabled和[disabled]有什么区别？选错会导致样式丢失
:disabled是伪类，匹配当前处于禁用状态的元素；[disabled]是属性选择器，只匹配HTML里写了disabled属性的元素——哪怕JS后来把element.disabled = false了，[disabled]样式依然在。
实操建议：
- 永远优先用
:disabled，它反映真实交互状态 -
[disabled]只适合极少数场景，比如需要在DOM加载瞬间就应用样式（且不关心后续JS修改） - 如果用了
!important强行覆盖:disabled，结果可能和JS状态脱节，调试时很难定位
表单控件里:disabled的继承行为容易踩坑
<fieldset disabled></fieldset>会禁用内部所有表单控件，但子元素上的:disabled样式不会自动继承——你得单独给input、select等写规则，否则它们看起来还是“可操作”的。
实操建议：
- 对
fieldset:disabled内的控件，显式写fieldset:disabled input:disabled等组合选择器 - 或者统一用
fieldset:disabled :is(input, select, button)（需注意:is()兼容性） - 测试时别只点按钮，务必检查
textarea、checkbox是否同步变灰
disabled属性设置，:disabled样式就断掉了。与其反复检查样式，不如把禁用状态收口到一个可控的数据源上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
