html - 创建一个伪造的有序列表

Question

我有一个网站列出了 the line of succession to the British crown .由于继承行是有序列表，因此网站的主要部分位于 <ol> 中。 .

但是，有一个皱纹。人们偶尔会退出继承顺序(最常见的是与天主教徒结婚)。例如，肯特的迈克尔王子在 1978-06-29 上排在第 16 位。 , 但是 the next day他从名单上消失了，因为他在那一天嫁给了一个天主教徒。

目前，如您所见，当他们被排除在继承人之外时，我只是将他们从列表中删除。但实际上，我想包括它们，但在列表中为它们的条目使用“变暗”字体。但这给了我另一个问题。然后我不能再使用有序列表，因为被排除在外的人在继承中没有位置。所以我需要省略有序列表中某些元素的编号。

所以我正在寻找模拟有序列表的最佳方法，但能够省略某些列表项上的数字。我有几个想法:

• 切换到 <ul>并添加我自己的号码。我可以设计它的样式以删除元素符号并突出数字吗？
• 改用缩进段落。
• 使用第一列非常窄的表格。

但我想知道我是否遗漏了 CSS 和/或 HTML 技巧。有没有更简单的方法来实现我正在寻找的东西？

更新:当前的 HTML 如下所示:

<ol>

  <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>

  <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>

  <li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Princess Charlotte of Cambridge</span>
            <br><span class="small">Age 2
    (born <a title="Line of Succession on 02 May 2015" href="/2015-05-02">02 May 2015</a>),
    <br>Great granddaughter of the sovereign</span></li>

  ...
</ol>

CSS 都是标准的 Bootstrap 4.0。哦，除了这一点:

span.small {
  font-size: 75%;
}

Answer 1

您可以使用 css counters 。您还必须向省略的元素添加一个类。

堆栈片段

ul {
  font: 13px Verdana;
  list-style: none;
  counter-reset: list;
  padding: 0;
}

ul>li:not(.disable):before {
  counter-increment: list;
  content: counter(list) ": ";
  position: absolute;
  left: 0;
}

ul>li {
  position: relative;
  padding-left: 20px;
}

ul>li.disable {
  opacity: .5;
}

<ul>
  <li>Text</li>
  <li>Text</li>
  <li class="disable">Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul>