2

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

在此处输入图像描述

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

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

PS：我很抱歉没有将代码放在问题中。Stack Overflow 一直说它有问题，即使预览中的所有内容都正确形成。尝试“修复”它几分钟后，我失去了耐心。

4

2 回答 2

3

使用 CSS 计数器

目前，没有办法使用 CSS 计数器完全自动化跨多个 ol 元素的反向编号（不反转列表项的显示顺序）。元素是动态的。如果整体上颠倒列表的显示顺序就可以了，看看这个答案。

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

  • 使用 JS，在页面加载时获取liCount适用元素的计数（ ）。li
  • 设置为父容器上liCount的属性的第二个参数，该counter-reset属性将包含所有适用的ol元素。property的第二个参数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 计数器的支持比反向 HTML5 属性要好得多。IE 和 Opera 根本不支持 reversed 属性。
  • 无论使用何种方法（counter-reset为计数器分配值，为 分配start值ol reversed），仍然需要 JS，但是当编号跨越多个有序列表时，用于设置的 JScounter-reset比另一种简单得多。

下面是使用该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>

于 2015-07-16T17:04:05.783 回答
2

你可以使用这样的东西：

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

于 2015-07-16T17:04:36.060 回答