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

作者：ManuelMatuzovic译者：前端小智来源：matuzo有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。我正在做一个项目，我有一个相反顺序的列表。列表按照创建时间降序排列，我想从语义上和视觉上都体现出来（让列表显示对应的数字，数字越大，最新的）。在网上做了一些研究，发现了一些有趣的解决方案，有些不错，有些不太好。最终的结果类似于下面这样：CBA下面我们来看看实现的方法。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;列表样式：无；}olli{counter-increment:my-custom-counter-1;}olli::before{content:counter(my-custom-counter)".";颜色：#f23c50；字体大小：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{显示：flex;flex-direction:column-reverse;}在页面上看起来是我们想要的结果，但是你按F12打开调试模式，查看DOM的顺序，你会发现DOM的顺序是“ABC”而不是“CBA”来呈现列表。此外，如果我们复制并粘贴列表，浏览器可能会按其原始顺序“ABC”复制它。我在StackOverflow上找到的另一个非常有创意的解决方案。结果类似于Flexbox的解决方案，但有更多缺点（例如，它会干扰滚动）。

1. A
2. B
3. C

ol{变换：旋转（180度）；}ol>li{变换：旋转（-180deg);}当然，估计是走投无路了，才会这样，最好不要这样。本期分享到此结束，感谢大家的收看，我们下期分享再见。达人的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dzone.com/articles/ht...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。