ol列表项默认不响应cursor样式，因li非交互元素；需设ol{cursor:pointer;pointer-events:auto}并配合tabindex="0"或onclick确保兼容性，::marker伪元素不支持cursor。
ol列表项默认不响应cursor样式？
直接给 设置 cursor: pointer 通常无效，因为 默认不是交互元素（没有 href、onclick 等），部分浏览器会忽略其 cursor 声明——尤其当它没绑定任何事件或没设 display: block 时。
真正起作用的是：**让浏览器认为这个元素“可点击”**。最可靠的方式是显式声明 pointer-events: auto（虽然默认就是 auto，但某些继承或重置场景下会被覆盖），并确保元素处于可交互的渲染状态。
给整个ol设置鼠标指针的正确写法
如果目标是让整个编号列表区域悬停时都显示手型（比如整个 ol 是一个跳转容器），推荐在
ol {
cursor: pointer;
/* 防止子元素（如嵌套内容）意外阻止事件穿透 */
pointer-events: auto;
}
注意：。
常见错误包括：
- 只写
li { cursor: pointer }却忘了编号（::marker）本身不继承 cursor - 在 CSS reset 中误设了
* { cursor: default !important }，覆盖了所有自定义 - 用
tabindex，导致键盘焦点下 cursor 不生效
只想让编号数字变手型？不行，但可以模拟
CSS 中 ::marker 伪元素目前（截至 2024）**不支持 cursor 属性**，无论你写 ol li::marker { cursor: pointer } 都会被忽略。
如果必须让“1.”“2.”这些编号看起来可点击，可行方案只有：
- 用
counter-reset+before伪元素重绘编号，并给li::before单独设cursor: pointer - 把编号包裹进
，用 JS 或服务端生成，再单独控制该 span 的 cursor - 放弃精确控制编号，改为对整个
设 cursor，并通过 padding/margin 让热区覆盖编号区域
兼容性与移动端注意事项
桌面端主流浏览器对 ol { cursor: pointer } 支持良好，但 iOS Safari 在某些老版本中对无交互属性的 onclick（不执行逻辑）或 tabindex="0"：
<ol tabindex="0" style="cursor: pointer;"> <li>第一项</li> </ol>
这能强制激活其交互状态，同时避免影响语义和屏幕阅读器（tabindex="0" 只是让它可聚焦，不改变角色）。另外，触摸设备上 cursor 样式本身无意义，但保留它不影响功能，也不建议移除——PC 端用户仍会看到。
真正容易被忽略的是：**编号位置由 list-style-position 控制，如果设为 inside，那么 cursor 区域会包含编号；设为 outside（默认）时，编号在盒模型外，光标移到数字上可能不触发 cursor，除非父容器有足够 padding 覆盖。**
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
