用 CSS 反转列表？（项目，而不是编号。）[重复]答案

【问题标题】：Reversing a list with CSS? (The items, not the numbering.) [duplicate]用 CSS 反转列表？（项目，而不是编号。）[重复]
【发布时间】：2016-03-18 02:56:03
【问题描述】：

是否可以使用 CSS 反转列表？也就是说，没有 javascript。

这是来源：

<!DOCTYPE html>
<html>
<head>
<title>Reversed List</title>
<style type="text/css">
ol.reverse li { /* what goes here? */ }
</style>
</head>
<body>
<ol class="reverse">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>
</body>
</html>

结果应该是这样的：

第三
第二
首先

（在谷歌上搜索时，总是会出现关于编号的问题，How to display a reverse-ordered list in HTML? 看起来也与编号有关，尽管我现在发现答案不是。）

【问题讨论】：

你用谷歌搜索过什么吗？你试过谷歌搜索“ol reverse”吗？
哇，这是我永远不会使用 CSS 的事情之一。主要是因为我永远不会认为它可以。它甚至有一个答案，它实际上是我在一段时间内看到的最酷的 CSS 功能，基于其简单性轻松胜过 css 仅 3d 对象。

标签： css

【解决方案1】：

你可以使用 flexbox 反转：

.reverse {
  display: flex;
  flex-direction: column-reverse;
}

<ol class="reverse" reversed>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

【讨论】：

这是（除了 JS）AFAIK 的唯一方法
即使这很棒，它也会显示为 3, 2, 1
@GottZ 比这里的 reversed 属性最终可能会有所帮助。
所以基本上stackoverflow.com/a/25695068/383904
由于某种原因，Firefox 上的计数器为 0 :( 并且无法手动修复，因为 counter-increment 只能看到树顺序。