如何实现带隐藏编号项的有序列表？王位继承网站开发需求

嘿，这个需求其实用CSS计数器就能完美解决，既不用放弃<ol>的语义化优势，又能轻松实现你要的隐藏编号+置灰效果，比换成ul或者表格靠谱多了！

核心思路 #

原生<ol>的编号是自动递增的，没法跳过特定项，但我们可以用CSS计数器手动管理编号逻辑：

1. 给整个继承顺位列表的<ol>添加专属类，重置并启动一个自定义计数器
2. 给正常继承资格的<li>设置计数器递增，用伪元素显示编号
3. 给失格人员的<li>添加disqualified类，让它不参与计数器递增，同时设置灰色文本并缩进对齐，保持列表的视觉一致性

HTML修改（低侵入性） #

只需要做两处小修改：

1. 给外层<ol>添加class="line-of-succession"
2. 给需要隐藏编号的失格人员<li>添加class="disqualified"

示例代码片段：

<ol class="line-of-succession">
  <li itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">The Prince Charles, Prince of Wales</span> <br>
    <span class="small">Age 69 (born <a title="Line of Succession on 14 November 1948" href="/1948-11-14">14 November 1948</a>), <br>Son of the sovereign</span>
  </li>
  <li itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Prince William, Duke of Cambridge</span> <br>
    <span class="small">Age 35 (born <a title="Line of Succession on 21 June 1982" href="/1982-06-21">21 June 1982</a>), <br>Grandson of the sovereign</span>
  </li>
  <!-- 失格人员：添加disqualified类 -->
  <li class="disqualified" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Prince Michael of Kent</span> <br>
    <span class="small">Disqualified 29 June 1978 due to marriage to a Catholic</span>
  </li>
  <li itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Prince George of Cambridge</span> <br>
    <span class="small">Age 4 (born <a title="Line of Succession on 22 July 2013" href="/2013-07-22">22 July 2013</a>), <br>Great grandson of the sovereign</span>
  </li>
</ol>

CSS代码（适配Bootstrap 4） #

这段代码会覆盖Bootstrap的默认列表样式，同时实现我们需要的效果，而且用了Bootstrap的原生灰色，保证视觉统一：

/* 重置有序列表默认样式，启动自定义计数器 */
ol.line-of-succession {
  list-style-type: none;
  counter-reset: succession-counter;
  padding-left: 0; /* 覆盖Bootstrap默认的padding-left */
}

/* 正常继承项：递增计数器，用伪元素显示编号 */
ol.line-of-succession > li:not(.disqualified) {
  counter-increment: succession-counter;
  padding-left: 2rem; /* 给编号预留空间 */
  position: relative;
  margin-bottom: 0.5rem; /* 保持Bootstrap列表的默认间距 */
}

/* 自定义编号样式（可按需调整） */
ol.line-of-succession > li:not(.disqualified)::before {
  content: counter(succession-counter);
  position: absolute;
  left: 0;
  font-weight: bold; /* 可选：让编号更醒目 */
  color: #495057; /* Bootstrap原生文本颜色 */
}

/* 失格项：置灰、不参与编号、对齐缩进 */
ol.line-of-succession > li.disqualified {
  color: #6c757d; /* Bootstrap默认灰色，和主题统一 */
  padding-left: 2rem;
  margin-bottom: 0.5rem;
  font-style: italic; /* 可选：加斜体突出失格状态 */
}

方案优势 #

• 语义化优先：保留了<ol>标签，完美契合“继承顺位”这种有序列表的语义，对SEO和屏幕阅读器友好
• 低侵入性：不用修改现有DOM结构，你的schema.org标记完全不受影响，只需要加两个类
• 易维护：所有样式逻辑都在CSS里，后续调整编号样式、失格状态表现，直接改CSS就行
• Bootstrap兼容：用了Bootstrap的原生颜色和间距，不会出现视觉冲突

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