一个有趣的解决方案：不使用后台和JS，只使用CSS来反转列表的数字，你会怎么做？

我正在做一个项目，我有一个倒序的列表。列表按照创建时间降序排列，我想从语义上和视觉上都体现出来（让列表显示对应的数字，数字越大，最新的）。在网上做了一些研究，发现了一些有趣的解决方案，有些不错，有些不太好。最终结果类似如下：3.C4.B5.A接下来我们看一下实现方法。HTML中的reversed属性很简单，最直接的解决办法就是HTML中的reversed属性。

C

B

A

reversed属性是一个布尔属性，reversed属性指定列表的顺序是降序(9,8,7...)，而不是升序(1,2,3...)。除了IE之外，大多数浏览器都支持reversed属性。如果您只想要一个解决方法，这就足够了。如果您对其他实现感到好奇，请继续阅读。在HTML中使用value属性的另一种方法是使用value属性：

CBA

虽然这种方式比较冗长，但是我们也对列表有了更多的控制。比如我们也可以这样操作：

CBA

最好不要这样做，因为跳过数字可能会使用户感到困惑。CSScustomcounter()第三种方式是使用CSScounter计算器。要反转计数器的顺序，我们需要做两件事：将计数器重置为0以外的值，并用负数递增计数器。

1. C
2. B
3. A

ol{counter-reset:my-custom-counter4;list-style:none;}olli{counter-increment:my-custom-counter-1;}olli::before{content:counter(my-custom-counter)".";color:#f23c50;font-size:2.5rem;font-weight:bold;}如果我们不知道列表的确切数量，我们可以将counter-reset属性移动到HTML中：

C

B

A

ol{list-style:none;}olli{counter-increment:my-custom-counter-1;}olli::before{content:counter(my-custom-counter)"."}一些文章建议使用Flexbox或类似技术来反转CSS中列表的顺序。我们不应该这样做，因为它看起来是正确的，但DOM的顺序保持不变。更改CSS中的顺序对DOM顺序没有影响。

1. A
2. B
3. C

ol{display:flex;flex-direction:column-reverse;}看起来像page是我们想要的结果，但是你按F12打开debug模式，查看DOM的顺序，你会发现DOM的顺序是**“ABC”而不是“CBA”**来渲染列表。此外，如果我们复制并粘贴列表，浏览器可能会按其原始顺序“ABC”复制它。我在StackOverflow上找到的另一个非常有创意的解决方案。结果类似于Flexbox的解决方案，但有更多缺点（例如，它会干扰滚动）。

1. A
2. B
3. C

ol{变换:旋转(180deg);}ol>li{变换:旋转(-180deg);}当然，估计是走投无路了，才会这样，最好不要这样。本期分享到此结束，感谢大家的收看，我们下期分享再见。作者：ManuelMatuzovic译者：FrontendXiaozhi来源：matuzo原文：https://dzone.com/articles/html-5-reverse-ordered-lists二维码关注。转载本文请联系大千世界公众号。