HTML技术文档中如何程序化引用编号列表的特定步骤编号？

嘿，作为技术文档工程师，我太懂你这种不想硬编码步骤编号的需求了——文档迭代时调整步骤顺序，硬写的“步骤3”很容易变成错误引用，简直是维护噩梦！结合你用HTML+CSS制作文档的技术栈，这里有两个实用的方案帮你实现程序化引用：

方案1：CSS计数器 + 自定义属性（纯前端无JS） #

这个方案完全用CSS实现，适合步骤都在同一个有序列表里的场景，不用写脚本就能自动同步编号：

HTML结构 #

<ol class="procedure-steps">
  <li>完成文档初始化配置</li>
  <li>导入所需的CSS样式文件</li>
  <li style="--target-step: counter(step-counter);">创建widget：编写widget的HTML结构并绑定基础样式</li>
  <li>测试widget的基础交互逻辑</li>
  <!-- 省略步骤5-9 -->
  <li>使用来自步骤<span class="step-reference"></span>的widget：将widget嵌入目标页面并完成最终功能调试</li>
</ol>

CSS样式 #

.procedure-steps {
  /* 初始化步骤计数器 */
  counter-reset: step-counter;
  list-style: none;
  padding-left: 2.5em;
  margin: 1em 0;
}

.procedure-steps li {
  /* 每一个li元素自动递增计数器 */
  counter-increment: step-counter;
  position: relative;
  margin-bottom: 0.8em;
}

/* 生成步骤编号 */
.procedure-steps li::before {
  content: counter(step-counter) ".";
  position: absolute;
  left: -2.5em;
  font-weight: 600;
  color: #2c3e50;
}

/* 引用步骤编号 */
.step-reference::after {
  content: var(--target-step);
  font-weight: 600;
  color: #e74c3c;
}

工作原理：CSS计数器自动生成步骤编号，我们在步骤3里用--target-step这个自定义属性存储当前的计数器值，步骤10里的.step-reference通过var(--target-step)调用这个值。后续如果调整步骤顺序（比如在步骤2和3之间加新步骤），计数器会自动更新，引用的编号也会跟着变。

方案2：JavaScript动态计算（灵活适配复杂结构） #

如果你的步骤不在同一个列表里，或者需要更复杂的引用逻辑，用JS动态计算步骤编号会更灵活：

HTML结构 #

<ol class="procedure-steps">
  <li id="step-init">完成文档初始化配置</li>
  <li id="step-import-styles">导入所需的CSS样式文件</li>
  <li id="step-create-widget">创建widget：编写widget的HTML结构并绑定基础样式</li>
  <li id="step-test-widget">测试widget的基础交互逻辑</li>
  <!-- 省略步骤5-9 -->
  <li id="step-use-widget">使用来自步骤<span id="ref-create-widget"></span>的widget：将widget嵌入目标页面并完成最终功能调试</li>
</ol>

JavaScript代码 #

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标步骤元素
  const targetStep = document.getElementById('step-create-widget');
  // 计算目标步骤在列表中的位置（+1是因为数组索引从0开始）
  const stepNumber = Array.from(targetStep.parentElement.children).indexOf(targetStep) + 1;
  // 将编号插入到引用位置
  document.getElementById('ref-create-widget').textContent = stepNumber;
});

工作原理：通过JS获取目标步骤在父级列表中的索引，自动计算出它的步骤编号，然后插入到引用的span标签里。不管步骤怎么调整顺序，只要元素ID不变，引用的编号都会自动更新。

小提示 #

• 用CSS方案时，要确保步骤3和步骤10在同一个counter-reset作用域内；
• 用JS方案时，建议给关键步骤设置唯一ID，避免DOM结构变化导致找不到元素；
• 两种方案都可以结合你的现有CSS样式调整，比如修改编号的颜色、字体权重，让引用更醒目。

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