Question

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

然而，有一个皱纹。人们偶尔会退出继承（最常见的是与天主教徒结婚）。例如，看到肯特王子迈克尔在1978-06-29排在第16位，但是the next day他已经从列表中消失了，因为他在那天与天主教徒结婚。

目前，正如您所看到的，当他们被排除在继承之外时，我只会将人员从列表中删除。但实际上，我想将它们包括在内，但使用的是“黯淡的”＃34;列表中的条目的字体。但这给了我另一个问题。然后，我可以不再使用有序列表，因为被排除的人不会在继承中占有一席之地。所以我需要省略有序列表中某些项目的数字。

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

切换到<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 。你还必须在省略的元素中添加一个类。

Stack Snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用css counters

ol {
  counter-reset: item;
  list-style: none;
  margin: 0;
  padding: 0;
}

ol li {
  display: block;
  padding: 0 0 0 2.5em;
  margin: 0;
  position: relative;
}

ol .counted:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 2.5em;
}

ol .level1>li {
  margin: 0;
  padding-left: 0;
}

ol .level1>.counted:before {
  left: -2.5em;
  font-weight: normal;
}


ol .level2>.list-item {
  padding-left: 2.5em;
}

ol .level2>.list-item:before {
  left: -1em;
  width: 3.5em;
}

.not-counted {color:green;}

<ol>
  <li class="counted">
    this is counted
    <ol class="level1">
      <li class="counted">
        this is counted
      </li>
      <li class="not-counted">
        this is not counted
      </li>
      <li class="counted">
        this is counted
        <ol class="level2">
          <li class="counted">
            this is counted
          </li>
          <li class="not-counted">
            this is not counted
          </li>
          <li class="counted">
            this is counted
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li class="not-counted">
    this is not counted
  </li>
  <li class="counted">
    this is counted
  </li>
</ol>

创建虚假的有序列表

2 个答案: