:disabled样式无效最常见原因是元素不支持该伪类，仅button、input等表单控件原生支持；div、span等添加disabled属性无效。
为什么 :disabled 样式完全没反应
最常见原因是目标元素根本**不支持 :disabled 伪类**。只有表单控件如 <button></button>、<input>、<select></select>、<textarea></textarea> 原生支持该状态；<div>、<code><span></span> 或自定义组件加了 disabled 属性也不会触发 :disabled 匹配。
检查方式：打开开发者工具，确认元素是否为可禁用的表单元素，且其 disabled 属性确实存在（不是 disabled="false" 这种字符串值）。
-
disabled是布尔属性，写成<button disabled></button>或<button disabled></button>都有效，但<button disabled></button>实际仍被禁用 - React/Vue 中通过
disabled={false}绑定时，若值为false，属性会被移除——此时:disabled自然不匹配 - Shadow DOM 内部元素需在 shadow root 中写样式，外部 CSS 无法穿透
选择器优先级不够导致样式被覆盖
浏览器默认样式或第三方库（如 Bootstrap、Element Plus）常带高优先级规则，例如 button:disabled { opacity: 0.5; } 可能被 button[disabled] { opacity: 0.3; } 覆盖——而后者虽然语义等价，但优先级更高。
解决办法不是盲目加 !important，而是对齐匹配方式：
立即学习“前端免费学习笔记（深入）”；
- 统一用属性选择器：
button[disabled]、input[disabled]，它和:disabled行为一致，但优先级略高且兼容性更好（IE9+） - 避免低权选择器如
.btn:disabled被button:disabled覆盖，改用button.btn:disabled或button[disabled].btn - 检查 computed styles 面板，看哪条规则“strikethrough”了你的声明，顺藤摸瓜定位冲突源
动态禁用后样式不更新的典型场景
Vue/React 中通过响应式数据控制 disabled 属性时，样式未同步变化，往往不是 CSS 问题，而是 DOM 属性未正确反映状态。
例如 Vue 模板中写成：
<button :disabled="isSubmitting ? 'disabled' : null>提交</button>
这会导致属性值变成字符串 "disabled"，而非布尔属性，:disabled 不识别。正确写法是：
<button :disabled="isSubmitting">提交</button>
同理，在 JS 中手动设置应使用 el.disabled = true，而不是 el.setAttribute('disabled', 'disabled')（虽然后者也生效，但某些旧版 Safari 对 :disabled 匹配不稳定）。
需要特别注意的边界情况
:disabled 对 <fieldset></fieldset> 有效，但它会**递归禁用内部所有可交互子元素**，而这些子元素自身并不带 disabled 属性——所以你不能靠给 input 写 input:disabled 捕获这种状态，得监听 fieldset:disabled input 或改用 fieldset:has(> :disabled)（仅现代浏览器）。
另一个易忽略点：Chrome 和 Safari 在 contenteditable 元素上不支持 :disabled，哪怕你强行加了 disabled 属性——这类元素应改用 [contenteditable="false"] 配合自定义 class 控制样式。
