反转多个 OL 的编号顺序（不是列表顺序）

Question

我想使用 CSS 获得一个连续编号和反向编号的有序列表。见附图

当然，我希望结果列表的顺序相反，即 [5]、[4] 等

我是否必须重新设计 CSS 部分，还是只是一个简单的更改？我不知道如何获得反向编号。

P.S.: 我很抱歉没有把代码放在问题中。 Stack Overflow 一直说它有问题，即使预览中的所有内容都是正确的。尝试 "fix" 几分钟后，我失去了耐心。

Answer 1

使用 CSS 个计数器

目前无法完全自动化跨多个ol元素反向编号（不颠倒显示顺序列表项）与 CSS 计数器当没有。元素是动态的。如果把列表的显示顺序颠倒一下就可以了，看看this answer.

您可以利用一些 JavaScript 和计数器来实现这一点。方法如下：

使用 JS，在加载页面时获取适用 li 元素的计数 (liCount)。
将 liCount 设置为父容器上 counter-reset 属性的第二个参数，该容器将包含所有适用的 ol 元素。 counter-reset 属性的第二个参数表示计数器的 initial/start 值。
在CSS中，将-1设置为counter-increment属性的第二个参数。通常第二个参数是计数器每次递增的数字。在这里，由于值设置为 -1，计数器实际上会递减。
正常情况下，使用 :before 伪元素显示计数器的值。

window.onload = function() {
  var liCount = document.querySelectorAll('ol > li').length;
  document.body.setAttribute('style', 'counter-reset: li ' + (liCount + 1));
}

ol {
  list-style-type: none;
  margin-left: 20px;
  padding: 0px;
}
ol > li {
  counter-increment: li -1;
}
ol > li:before {
  content: "[" counter(li) "]";
  padding-right: 10px;
}

<div id="content">
  <h3>Year</h3>
  <ul>
    <li><a href="#2010-2015">2010-2015</a></li>
    <li><a href="#2007-2008">2007-2008</a></li>
  </ul>
</div>
<h3 id="2010-2015">2010-2015</h3>
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<h3 id="2007-2008">2007-2008</h3>
<ol>
  <li>D</li>
  <li>E</li>
</ol>

为什么不反转属性？

浏览器支持 CSS counter is much better than the reversed HTML5 attribute。 IE 和 Opera 完全不支持 reversed 属性。
无论使用何种方法，仍然需要 JS（为计数器分配 counter-reset 值，为 ol reversed 分配 start 值）但是用于设置 counter-reset 的 JS当编号跨越多个有序列表时，比另一个简单得多。

下面是使用 reversed 属性的示例片段。 我不赞成这种方法，因为它取自链接线程和此处的其他答案。我将它与添加的 JS 一起使用只是为了说明我在上面第 2 点中的意思。

window.onload = function() {
  var liCount = document.querySelectorAll('ol > li').length;
  var olEls = document.querySelectorAll('ol[reversed]');

  var prevLiCount = 0;
  for (var i = 0; i < olEls.length; i++) {
    /* the below lines are required because start for first ol is from 5 whereas for next is from 2 */
    olEls[i].setAttribute('start', liCount - prevLiCount);
    prevLiCount = olEls[i].querySelectorAll('li').length;
  }
}

<div id="content">
  <h3>Year</h3>
  <ul>
    <li><a href="#2010-2015">2010-2015</a>
    </li>
    <li><a href="#2007-2008">2007-2008</a>
    </li>
  </ul>
</div>
<h3 id="2010-2015">2010-2015</h3>
<ol reversed="reversed">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<h3 id="2007-2008">2007-2008</h3>
<ol reversed="reversed">
  <li>D</li>
  <li>E</li>
</ol>

Answer 2

你可以使用这样的东西：

<ol reversed start="5">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

反转多个 OL 的编号顺序（不是列表顺序）

Reverse the numbering order across multiple OL (not list order)

html

css

reverse

html-lists

css-counter

使用 CSS 个计数器

为什么不反转属性？