button:disabled 应配合 color、background-color、cursor、pointer-events 四条规则使用，opacity 仅作辅助 fallback；必须操作 disabled 属性而非 class，否则伪类不触发。
直接用 button:disabled { opacity: 0.45; } 就能生效，但这样写大概率会让按钮在深色背景上文字看不清、图标糊成一片、鼠标悬停没反馈——不是 opacity 不工作，而是它只管“透明”，不管“可访问”和“可用”。
button:disabled 里设 opacity 为什么经常失效或难看
常见错误是把禁用样式写成 .disabled { opacity: 0.45; }，这完全不触发浏览器原生禁用逻辑：按钮仍可点击、屏幕阅读器读不出状态、disabled 属性没设，CSS 伪类根本不会匹配。
- 必须用
button:disabled（或input:disabled等），不能靠自定义 class 模拟 -
opacity会同时弱化文字、图标、边框、阴影，小字号按钮在深色模式下对比度常低于 WCAG 4.5:1 - iOS Safari 和部分安卓 WebView 对
:disabled的 opacity 渲染不稳定，有时禁用了但视觉毫无变化 - 没配
cursor: not-allowed，用户悬停时鼠标还是手型，产生误操作
真正可控的禁用样式至少要配齐四条规则
别只依赖一个 --opacity-disabled 变量。单独改它，等于只调亮度，却不管颜色、交互、语义——结果就是按钮“看起来像禁用”，但实际体验断裂。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
button:disabled { color: var(--btn-color-disabled, #6c757d); }—— 文字色必须明确定义，不能靠 opacity 推导 -
button:disabled { background-color: var(--btn-bg-disabled, #e9ecef); }—— 背景色也要独立控制，尤其深色模式需不同值 -
button:disabled { cursor: var(--btn-cursor-disabled, not-allowed); }—— 浏览器不会因 opacity 改变自动换光标 -
button:disabled { pointer-events: none; }—— 避免 opacity=0 时元素仍可被点击（虽然 disabled 属性本应阻止，但加一层保险更稳）
opacity 在禁用样式里该不该用？怎么用才安全
可以用，但只能作为辅助手段，且必须降权为 fallback。现代禁用样式的核心是“明确色值 + 明确交互 + 明确语义”，不是“模糊化”。
- 如果要用
opacity，写法必须是：opacity: var(--opacity-disabled, 0.45);，且仅出现在已定义好上述四条规则的前提下 - 深色模式下不要复用浅色的 opacity 值，
@media (prefers-color-scheme: dark) { :root { --opacity-disabled: 0.55; } }仅是起点，还得同步调--btn-color-disabled和--btn-bg-disabled - 对图标按钮（含
<i></i>或 SVG），opacity会连带弱化图标——此时更推荐放弃 opacity，直接用color: var(--btn-color-disabled)+fill: currentColor控制 - 永远检查禁用后文本对比度：用浏览器 DevTools 的无障碍面板测，别凭肉眼判断
最易被忽略的一点：JS 动态控制禁用状态时，必须操作 disabled 属性本身，比如 btn.disabled = true，而不是 btn.classList.add('disabled')——后者在 Bootstrap 5+ 或任何现代框架里，都不触发 :disabled 伪类，opacity 样式自然不会应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
