如何通过CSS为HTML标题插入锚点解决PDF目录跳转问题？

不行，CSS没办法直接插入<a id="...">这类锚点元素——CSS是用来控制样式的，不能修改HTML的DOM结构。不过有几个实用的解决方案适配你的Prince转PDF场景：

• 预处理HTML添加锚点
  用脚本（比如Python的BeautifulSoup、Node.js的Cheerio）批量处理合并后的HTML：遍历所有<h1>标签，把标题文本转成合法的ID（替换空格为连字符、去掉特殊符号），要么直接给<h1>加上id属性，要么在<h1>前插入<a id="xxx"></a>锚点。
  举个处理后的例子：

  <h1 id="我的第一篇技术博客">我的第一篇技术博客</h1>
  

  之后把目录里的href改成对应#我的第一篇技术博客就行。

• 利用Prince自身的锚点/目录特性
  Prince对PDF书签和目录的支持很完善，不用手动插锚点也能实现跳转：

  1. 给标题标签设置书签层级，让Prince自动识别锚点：

     h1 {
         bookmark-level: 1;
         bookmark-label: content();
     }
     

  2. 用Prince的CSS规则自动生成带跳转的目录，比如：

     @page toc {
         @top { content: "目录"; }
     }
     .toc {
         page: toc;
     }
     .toc a::after {
         content: leader('.') target-counter(attr(href), page);
     }
     

  只要目录里的链接href指向对应<h1>的选择器或者ID，Prince就能自动关联跳转。

• 用JavaScript动态生成锚点
  Prince支持执行JavaScript，你可以在HTML里加一段脚本，页面加载时自动给<h1>添加锚点：

  document.querySelectorAll('h1').forEach(h1 => {
      // 把标题转成合法ID：替换空格、去掉特殊字符
      const safeId = h1.textContent.trim().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
      // 直接给h1设置id，替代单独插a标签
      h1.id = safeId;
  });
  

  这样目录里的href指向#safeId就能正常跳转了。

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