cursor 值分为三类：预定义关键词（如 pointer）、URL 自定义图像（需配备选值如 auto）、组合回退机制（多 URL 链式兜底）；漏备选值将导致 Chrome/Firefox 忽略声明。
cursor 值分三类：预定义关键词、URL 自定义图像、组合回退机制
浏览器识别的 cursor 值不是“随便写个单词就行”，而是明确分为三类：标准关键词（如 pointer）、图像 URL（url()）和必须跟在后面的备选值（如 auto 或 default）。漏掉备选值，自定义光标在 Chrome/Firefox 中会直接失效——不是显示默认箭头，而是彻底忽略该声明。
-
cursor: pointer;有效，无需备选（纯关键词） -
cursor: url('hand.cur');❌ 大部分现代浏览器不生效 -
cursor: url('hand.cur'), pointer;✅ 正确写法，pointer是兜底 - 可链式提供多个 URL：
cursor: url('c.cur'), url('c.png'), url('c.gif'), default;，浏览器按顺序尝试加载
常用预定义值及其真实使用场景
别死记 20+ 个值。实际项目中高频使用的就 6–8 个，其余多是边缘场景或兼容老系统用的。关键是理解「为什么选这个值」，而不是「有没有这个值」。
-
pointer：用于所有可点击区域（按钮、卡片、菜单项），但**不要滥用在纯文字链接外的 div 上**——若没绑定 click 事件或 tabindex，会误导用户且损害可访问性 -
text：仅用于真正可编辑/可选中的内容，比如<input>、<textarea></textarea>、contenteditable元素；对普通<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>加text属于伪交互提示 -
waitvsprogress：wait表示“阻塞等待”（如 JS 同步计算卡住），progress表示“后台运行中仍可操作”（如上传同时能点其他按钮），二者语义不同，不可互换 -
grab/grabbing：现代拖拽 UI 的标配，但 IE 完全不支持；需配合 JS 切换：el.style.cursor = 'grab';→ 按下时 →'grabbing' -
not-allowed：禁用态按钮的正确选择，比default更准确；no-drop是拖放 API 中的专用状态，一般不用在普通按钮上
自定义光标（PNG/SVG/CUR）的实操要点
用图片做光标看着酷，但坑密集：尺寸限制、热点偏移、格式兼容、性能开销都得提前踩一遍。
- 推荐优先用 SVG Data URL：
cursor: url("data:image/svg+xml;utf8,...") 16 16, auto;，避免额外请求，且支持缩放不失真 - 热点坐标（如
16 16）必须写，否则点击点默认落在左上角（0,0），导致“明明指着按钮却点不中” - .cur 文件虽原生支持热点，但开发调试极不友好；.png 更通用，但 Safari 对大尺寸 PNG 光标（>128×128）可能截断或模糊
- 移动端（iOS/Android）基本不支持任何自定义
cursor，该属性在触屏设备上被静默忽略——别为 H5 页面费劲做 SVG 光标 - 每个自定义光标都会触发一次资源加载，大量元素同时设置（如表格每行都设）可能引发瞬时网络请求风暴，建议用 CSS class 统一控制，而非内联 style
兼容性与可访问性容易被忽略的细节
很多人以为加了 cursor: pointer; 就万事大吉，其实它只是视觉线索。真正的交互保障不在 CSS 里，而在 HTML 和 JS 层。
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器不读取
cursor值，所以仅靠手型光标无法传达“这是按钮”；必须配合语义化标签（<button></button>）或role="button"+tabindex="0" - 高对比度模式（Windows / macOS 系统级）下，自定义光标会被强制替换为系统高对比光标，
url()内容完全失效 - CSS
cursor不继承!important，但会继承父级值；如果父容器设了cursor: not-allowed;，子元素没重写就会一起变灰，常导致“按钮明明可用却显示禁止图标” - Firefox 对
zoom-in/zoom-out支持不稳定，某些版本渲染为普通放大镜，某些直接 fallback 到default；生产环境慎用
wait，反而让用户误以为页面卡死；或者在响应式布局中对移动端也硬塞自定义光标，结果什么都没发生。光标是交互的终点提示，不是起点装饰。 
