:disabled伪类仅匹配带disabled属性的原生表单控件；必须显式添加disabled属性而非仅用样式模拟，且需注意Firefox对input[type="button"]的默认样式覆盖问题。
disabled 伪类只对表单控件生效，普通 <button></button> 必须带 disabled 属性才匹配
很多人写 button:disabled 却没效果，根本原因是按钮没真正被禁用——只是加了 opacity: 0.5 或 pointer-events: none。CSS 的 :disabled 是基于 HTML 的 disabled 属性（布尔属性）触发的，不是靠样式或 JS 状态模拟出来的。
所以必须确保：
- 按钮是原生表单控件（
<button></button>、<input type="button">、<input type="submit">等） - HTML 中显式写了
disabled属性，例如：<button disabled>提交</button> - 不要依赖 JS 动态移除/添加 class 来“模拟”禁用状态，那得用自定义类（如
.is-disabled）配合 CSS
常见视觉提示组合：颜色 + 指针 + 透明度 + 边框弱化
仅改文字颜色不够，用户可能忽略。推荐一套轻量但明确的组合：
-
color和border-color用灰阶（如#999），避免与正常状态色相冲突 - 加
cursor: not-allowed—— 这是最直接的交互反馈，比透明度更早被感知 - 慎用
opacity: 0.6：它会让子元素（比如图标 SVG）也变淡，有时影响可读性；优先用颜色和边框降噪 - 如果用了
background，记得同时调暗背景色，否则文字灰了但背景太亮会反差失衡
示例：
立即学习“前端免费学习笔记（深入）”；
button:disabled {
color: #999;
background: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
Vue/React 中动态禁用时，别漏掉属性绑定
框架里常通过数据控制禁用状态，但容易只改 class 或 style，忘了同步设置原生 disabled 属性。
- Vue：用
:disabled="isSubmitting"，不是:class="{ 'is-disabled': isSubmitting }" - React：用
disabled={isSubmitting}，不是className={isSubmitting ? "btn disabled" : "btn"} - 若用
useEffect或watch手动操作 DOM 添加disabled，注意 SSR 下服务端不执行 JS，首屏仍可能不生效
Firefox 下 input[type="button"] 的 :disabled 样式有默认覆盖
Firefox 会给禁用的 <input type="button"> 强制加上灰色背景和文字，即使你写了 button:disabled { background: red } 也可能被忽略。解决方式：
- 优先用
<button></button>替代<input type="button">—— 更易样式化，语义也更准 - 如果必须用
input，加appearance: none并重置所有外观相关属性（background、border、color） - 测试时务必在 Firefox 中检查真实渲染，别只信 Chrome 表现
:disabled 不是监听 class，它只认那个小小的、不可见的 disabled 属性。 
