微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在锚链接中包含 css 计数器?

如何解决在锚链接中包含 css 计数器?

问题总结

我正在为一个简单的 html 文档创建一个打印样式表,其中包含 id 引用的标题和锚点来引用这些标题,例如

<h1 id="the-document">The Document</h1>
<h2 id="background">Background</h2>
<h2 id="implementation">Implementation</h2>
<p>For details,see <a href="#background">Background</a>.</p>

打印样式需要使用 css 计数器创建的部分编号,例如

h1 {
  counter-reset: section
}
h2:before {
  content: counter(section) ". ";
  counter-increment: section
}

我尝试将附加到“背景”部分的“1.”也添加到引用该部分的锚点,即结果应该看起来像

文档

1.背景

2.实施

详情见1. Background

有没有办法添加引用到引用该部分的锚点的部分的计数器?没有 JavaScript?

我的尝试

将当前计数器添加到所有引用会导致错误的计数器值,例如

a[href^=#]:before { content: counter(section) ". "; }

会导致

详情见2. Background

我知道这可以用 JavaScript 来完成:

let section = 0;
const h2s = Array.from(document.querySelectorAll('h1,h2')).reduce((h2s,h,i) => {
  switch (h.nodeName) {
    case 'H1': section = 0; break;
    case 'H2': h2s[h.id] = ++section; break;
  }
  
  return h2s;
},{})

Array.from(document.querySelectorAll('a[href^="#"]')).forEach(_ => _.textContent = `${h2s[_.href.split('#')[1]]}. ${_.textContent}`)
h1 {
  counter-reset: section;
}
h2:before {
  content: counter(section) ". ";
  counter-increment: section;
}
<h1 id="the-document">The Document</h1>
<h2 id="background">Background</h2>
<h2 id="implementation">Implementation</h2>
<p>For details,see <a href="#background">Background</a></p>

它可能会关心谁,我正在 Jekyll 中编写 Markdown(用于 GitHub 页面,因此没有插件)并且宁愿删除功能也不愿添加 JavaScript 来实现它。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。