html - 反转多个 OL 之间的编号顺序(不是列表顺序)

Question

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

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

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

P.S.:我很抱歉没有将代码放入问题中。 Stack Overflow 一直说它有问题，尽管预览中的所有内容都是正确的。尝试“修复”它几分钟后我失去了耐心。

Answer 1

使用 CSS 计数器

目前还没有办法完全自动化跨多个 ol 元素进行反向编号(不反转列表项的显示顺序) CSS 计数器何时没有。元素的数量是动态的。如果整个列表的显示顺序颠倒一下就可以了，看看 this answer .

您可以使用一些 JavaScript 和计数器来实现此目的。方法如下:

• 使用 JS，在页面加载时获取适用的 li 元素的计数 (liCount)。
• 将 liCount 设置为父容器上 counter-reset 属性的第二个参数，该父容器将包含所有适用的 ol 元素。 counter-reset 属性的第二个参数表示计数器的初始值。
• 在 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比 reversed HTML5 attribute 好得多。 IE 和 Opera 根本不支持反向属性。
• 无论使用哪种方法，仍然需要 JS(为计数器分配 counter-reset 值，为 ol returned 分配 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>