元素默认光标是default（箭头）而非pointer，因css不自动为交互元素添加cursor: pointer；需显式设置button { cursor: pointer; }，并在button:disabled中显式声明cursor: not-allowed以确保禁用态视觉一致。
button 元素默认光标为什么不是 pointer
HTML <button></button> 在多数浏览器中默认使用 default 光标（箭头），而非更直观的 pointer（手型），这和它语义上“可点击”但样式未显式声明有关。CSS 不会自动为交互元素添加 cursor: pointer，除非你手动设置或依赖某些 UI 框架的重置规则。
用 CSS 的 cursor 属性直接控制按钮光标
最直接有效的方式是给 <button></button> 添加内联样式或类样式，指定 cursor 值。注意：该属性对 <button></button> 完全生效，无需额外 hack。
常见可用值及适用场景：
-
cursor: pointer—— 标准点击提示，适用于所有主操作按钮 -
cursor: wait—— 按钮处于加载中状态时（配合禁用disabled或 loading class） -
cursor: not-allowed—— 按钮被逻辑禁用（如权限不足、表单未完成），比仅设disabled更明确传达不可点 -
cursor: help—— 用于带说明的辅助按钮（如问号图标按钮）
示例：
<button style="cursor: pointer;">提交</button> <button class="btn-loading" style="cursor: wait;">处理中...</button>
disabled 状态下 cursor 自动变成 not-allowed？不一定
原生 disabled 属性确实会让大多数浏览器把 cursor 设为 not-allowed，但这不是规范强制要求，而是浏览器实现惯例。部分定制主题或重置 CSS（如某些 reset.css）可能覆盖该行为。
稳妥做法是显式声明：
button:disabled { cursor: not-allowed !important; }
特别注意：!important 在这里不是滥用，而是防止第三方样式干扰禁用态的视觉反馈。
hover 里改 cursor 会覆盖默认行为吗
会，但没必要单独只在 :hover 里设 cursor。因为用户移入前无法感知可点击性，体验断层。正确做法是：默认状态就设好 cursor，再根据状态（如 :hover、:active、:disabled）微调。
错误写法：
button:hover { cursor: pointer; } /* 移入才变手型，太晚了 */
正确写法：
button { cursor: pointer; }
button:hover { background-color: #007bff; }
button:disabled { cursor: not-allowed; }
实际项目里最容易漏掉的是 disabled 状态下的 cursor 一致性，尤其当按钮通过 JS 控制启用/禁用（而非原生 disabled 属性）时，必须同步加 class 并配好对应 cursor 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
