按钮禁用时需手动设置 cursor: not-allowed，因:disabled不自动改光标；应同时使用:disabled和[disabled]确保js动态禁用生效；禁用态样式推荐分别设置颜色与背景色以满足wcag对比度要求。
按钮禁用时鼠标指针不变成not-allowed？
默认情况下，:disabled 本身**不会自动改鼠标样式**。浏览器只负责禁用交互（点不动、不触发事件、不聚焦），但光标仍沿用元素默认值（比如 button 是 default，a 是 pointer）。得手动加 cursor: not-allowed 才行。
- 必须写在
:disabled伪类里，单独写button { cursor: not-allowed }会污染所有按钮 - 注意优先级：如果按钮已有
style="cursor: pointer"行内样式，CSS 里的:disabled规则会被覆盖，得加!important或改用更具体的选择器 - 移动端没鼠标，这个样式纯为桌面端反馈，不影响功能
button:disabled 和 button[disabled] 有什么区别？
两者都能匹配禁用按钮，但行为不完全等价：:disabled 是状态伪类，反映的是**当前是否被禁用**；[disabled] 是属性选择器，只匹配**HTML 中写了 disabled 属性**的元素。
- JS 动态设置
el.disabled = true会触发:disabled，但不会自动添加disabled属性（除非你手动el.setAttribute('disabled', '')） - 所以只用
[disabled]选中器，可能漏掉 JS 控制的禁用状态 - 稳妥做法是同时写：
button:disabled, button[disabled] - Vue/React 等框架里，
disabled常由绑定表达式控制（如:disabled="isSubmitting"），此时只有:disabled能正确响应
禁用按钮的文本颜色和背景色怎么配才合理？
不能只靠 opacity: 0.5 —— 它会让整个按钮变灰、降低可读性，还可能让辅助技术误判内容可用性。
- 推荐分别控制：
color用浅灰（如#999），background-color用中灰（如#f0f0f0），保留对比度 - 避免用
opacity，否则图标、边框、阴影也一起淡化，视觉层次混乱 - 如果按钮有渐变背景或图片，
opacity更容易出问题，优先用颜色替换 - WCAG 要求禁用态文字对比度仍不低于 4.5:1（对小字）或 3:1（对大字），别直接套用设计稿的“看起来灰一点就行”
为什么加了 :disabled 样式，但 Safari 里还是没生效？
Safari 对某些表单控件（尤其是 button）的 :disabled 支持比较保守，尤其当按钮是 type="submit" 或嵌套在 form 里时，可能忽略部分样式声明。
- 确保没有其他规则用更高优先级覆盖了你的
:disabled样式（比如用了 ID 选择器或!important的通用重置） - 尝试把
cursor和color拆开写，不要缩写在all: unset后面——Safari 对all的处理不一致 - 极少数情况需补上
-webkit-appearance: none，防止 Safari 强制使用原生样式 - 真遇到顽固 case，可以退一步用
button[aria-disabled="true"]配合 JS 设置属性，绕过原生:disabled的渲染差异
禁用态样式最麻烦的不是写法，而是它常被当成“一次性配置”——其实只要按钮的启用逻辑变了（比如从属性控制变成 JS 控制，或加了异步校验），:disabled 的生效边界就可能偏移。多测几个触发路径，比多写几行 CSS 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
