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

Question

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

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

我是否需要重新设计CSS部分或者这是一个简单的改变？我无法弄清楚如何获得反向编号。

P.S。：我很抱歉没有把代码放在问题中。尽管所有内容都在预览中正确形成，Stack Overflow仍然说它有问题。几分钟后我试图“修理”它就失去了耐心。

Answer 1

使用CSS计数器

目前无法使用CSS计数器完全自动化多个 ol 元素 <反向编号（不会颠倒列表项的显示顺序）没有。元素是动态的。如果整体上颠倒列表的显示顺序很好，请查看this answer。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为什么不反转属性？

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

以下是使用reversed属性的示例代码段。 我不赞成这种方法，因为它是从链接的线程和其他答案中获取的。我已经使用它添加JS仅用于说明我在上面第2点中的含义。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下内容：

＆＃13;

＆＃13;

println

＆＃13;

＆＃13;

＆＃13;