如何在HTML中实现标题编号的交叉引用？

你当前的代码中，交叉引用显示的是锚点字符串（如#About）而非对应标题的编号，原因是attr(href)仅能获取链接的属性值，无法直接读取目标标题的计数器编号。以下是两种可行的解决方案：

方案一：纯CSS（现代浏览器支持） #

利用CSS的target-counter()函数直接获取目标元素的计数器值，无需修改HTML结构：

body {
  counter-reset: h2counter;
}

h1 {
  counter-reset: h2counter;
}

.countheads~h2:before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
}

h2 {
  counter-reset: h3counter;
}

.countheads~h3:before {
  content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
  counter-increment: h3counter;
}

ol {
  list-style-type: lower-roman;
}

/* 修正交叉引用样式 */
a.h2ref:after {
  content: "Section " target-counter(attr(href), h2counter);
}

a.h3ref:after {
  content: "Subsection " target-counter(attr(href), h3counter);
}

说明 #

• target-counter(attr(href), h2counter)会解析href指向的元素，获取其对应的h2counter计数器值，自动输出正确的编号。
• 该特性属于CSS Counters Level 3，Chrome、Firefox、Safari等现代浏览器均支持。

方案二：JavaScript兼容方案（适配旧浏览器） #

如果需要兼容不支持target-counter的旧浏览器，可以通过JS动态设置链接的文本内容：

<!-- 保留原HTML结构，在末尾添加JS -->
<script>
// 处理h2引用
document.querySelectorAll('a.h2ref').forEach(link => {
  const targetId = link.getAttribute('href').slice(1);
  const targetH2 = document.getElementById(targetId);
  if (targetH2) {
    // 获取标题前的计数器编号（通过伪元素内容）
    const counter = window.getComputedStyle(targetH2, ':before').content;
    // 去除引号和空格，提取数字
    const sectionNum = counter.replace(/["'\s.]/g, '');
    link.textContent = `Section ${sectionNum}`;
  }
});

// 处理h3引用
document.querySelectorAll('a.h3ref').forEach(link => {
  const targetId = link.getAttribute('href').slice(1);
  const targetH3 = document.getElementById(targetId);
  if (targetH3) {
    const counter = window.getComputedStyle(targetH3, ':before').content;
    const sectionNum = counter.replace(/["'\s.]/g, '');
    link.textContent = `Subsection ${sectionNum}`;
  }
});
</script>

说明 #

• 通过getComputedStyle获取标题伪元素的内容，提取出编号后设置为链接的文本。
• 需要给h3添加对应的id属性（如<h3 id="Sub1">Subheading</h3>）才能被正确引用。

内容的提问来源于stack exchange，提问作者ptav