本文介绍一种无需 javascript 的纯前端方案，通过自定义 css 计数器与锚点链接结合，使有序列表中的编号（如“(1)”“(2)”）变为可点击跳转的超链接，适用于 wiki 等不支持 js 的静态内容环境。
本文介绍一种无需 javascript 的纯前端方案，通过自定义 css 计数器与锚点链接结合，使有序列表中的编号（如“(1)”“(2)”）变为可点击跳转的超链接，适用于 wiki 等不支持 js 的静态内容环境。
在标准 HTML 中，<ol> 的编号由浏览器自动渲染，且 <li::marker> 伪元素不可直接绑定事件或添加 href，因此无法让原生计数器具备点击能力。但我们可以绕过原生计数机制，采用 CSS 自定义计数器 + 锚点链接内嵌编号 的方式，在保持语义化和样式可控的前提下，实现完全基于 HTML 和 CSS 的可点击编号。
核心思路
- 使用 counter-reset 和 counter-increment 手动管理序号；
- 将编号生成逻辑移至 <a> 标签的 ::before 伪元素中，使其成为链接的一部分；
- 每个 <a> 标签的 href 指向对应 <li> 的 ID 锚点（如 #MyID），确保点击编号即可平滑跳转到目标位置。
完整实现代码
<style> .myList {counter-reset: myList; padding-left: 0; /* 可选：清除默认 ol 左侧缩进 */} .myList li {list-style: none; /* 关闭原生编号 */ margin-bottom: 0.5em;} .myList li a {color: #0066cc; text-decoration: none; font-weight: normal;} .myList li a:before {counter-increment: myList; content: "(" counter(myList) ") "; margin-right: 0.5em; color: #555; } /* 可选：悬停反馈增强可用性 */ .myList li a:hover:before {text-decoration: underline;} </style> <ol class="myList"> <li><a href="#MyID">A</a></li> <li><a href="#itemB">B</a></li> <li><a href="#itemC">C</a></li> </ol> <!-- 对应锚点（通常位于页面其他位置）--> <h3 id="MyID"> 第一项详情 </h3> <p> 这里是 A 的详细内容……</p> <h3 id="itemB"> 第二项详情 </h3> <p> 这里是 B 的详细内容……</p> <h3 id="itemC"> 第三项详情 </h3> <p> 这里是 C 的详细内容……</p>注意事项与最佳实践
- ✅ ID 唯一性必须保证 ：每个 <a href=”#xxx”> 中的 xxx 必须与页面中某个元素的 id 属性严格匹配，否则跳转失败；
- ✅ 语义兼容性良好 ：仍使用 <ol> 包裹，保留在无障碍（a11y）和 SEO 上的列表语义；
- ⚠️ 避免嵌套链接 ：<a> 内不可再包裹其他可交互元素（如按钮、子链接），否则违反 HTML 规范；
- ⚠️ Wiki 环境适配提示 ：部分 Wiki 引擎（如 MediaWiki）会过滤 <style> 标签或限制内联样式，建议将 CSS 提前注入全局样式表，或确认其支持 <style> 在正文中的使用；
- ? 扩展性建议 ：如需支持多级编号（如 1.1、1.2），可叠加多层 counter() 并配合 counter(level1, decimal) “.” counter(level2, decimal) 实现。
该方案零依赖、高兼容，完美契合“生成后粘贴至 Wiki”的轻量发布流程，是静态内容场景下提升导航体验的优雅解法。
