html - HTML中列表的反向编号

Question

我想知道如何使用 css/html 创建一个反向列表，例如

5. 红色
4. 绿色
3. 蓝色
2. 黄色
1. 黑色

Answer 1

您可以通过使用带有 HTML 的简单保留属性来做到这一点，请访问以下链接以获取完整说明

<ol reversed>  
    <li>Red</li>  
    <li>Green</li>  
    <li>Blue</li>  
    <li>Yellow</li>  
    <li>Black</li>  
</ol>  

见小提琴 http://jsfiddle.net/sYSEJ/

Answer 2

您可以使用 CSS 来执行此操作，但您需要指定起始值。这仍然比value在每个列表元素上填写属性更容易。

例如，有 4 个列表项：

ol {
  counter-reset: num 5;
  list-style-type: none;
}

li:before {
  counter-increment: num -1;
  content: counters(num, ".") " ";
}

这适用于 IE8 及更高版本。

Answer 3

<ol reversed="reversed">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
</ol>

Answer 4

HTML5 CR 具有reversed用于此类目的的属性，但这是一个错误的解决方案，因为它使渲染依赖于浏览器。它已经在浏览器中缓慢实现，例如 IE 甚至在版本 10 中也不支持它。此外，它（可以说）是展示性的，向 HTML 添加新的展示性属性是违反大势所趋的。

一些替代方案：

1. 为每个元素添加value属性。li这可以在生成页面服务器端或使用客户端 JavaScript 时完成。
2. 使用一个ul元素，隐藏项目符号 ( list-style-type: none)，并将数字放入li内容中（可能以编程方式，如上所示）。为什么ul而不是ol？因为当 CSS 关闭时你不想要双重编号。
3. 如上所述，但在 CSS 中使用生成的内容和计数器。

Answer 5

您可以使用标签reversed的属性。ol但它不支持IE和Opera。

• 如果您想要一个跨浏览器支持解决方案，那么您需要查看 javascript。
• 或者，为什么不使用其他元素，如divorspan并使用 javascript 动态分配数字？

如果您选择 javascript 而不是严格使用 HTML 和 CSS，那么有很多选择。

一个例子：（使用javascript）

<ol id="olTag">..............

---

ChangeNumbering();    
function ChangeNumbering() {
    var list = document.getElementById("olTag");
    var liTags = list.getElementsByTagName("li");
    var length = liTags.length;
    for (var i = length; i > 0; i--) {
        liTags[length - i].value = i;
    }
}

JSFIDDLE

旁注：Value属性li在 HTML4 中已弃用，但在 HTML5 中再次引入。所以，当然它仍然是 跨浏览器。