如何在HTML中显示反向sorting列表？

我需要你快速的帮助。 有什么办法在CSS / SCSS显示反向sorting列表。 像这样的东西：

5. I am a list item. 4. I am a list item. 3. I am a list item. 2. I am a list item. 1. I am a list item. 

Answer 1

你可以旋转父元素180deg ，然后旋转子元素-180deg 。

 ul { transform: rotate(180deg); } ul > li { transform: rotate(-180deg); } 

示例在这里

或者，您可以使用弹性盒以及order属性。

---

虽然这在技术上并不颠倒顺序，但也可以使用counter-increment和伪元素。

示例在这里

 ul { list-style-type:none; counter-reset:item 6; } ul > li { counter-increment:item -1; } ul > li:after { content: counter(item); } 

Answer 2

您可以使用flexbox来实现这一点。 它允许您通过flex-direction属性来颠倒顺序。

 ol { display: flex; flex-direction: column-reverse; } li { flex: 0 0 auto; } 

• 规范
• 现场演示
• 有限的浏览器支持

Answer 3

 <ol reversed> <li>I am a list item.</li> <li>I am a list item.</li> <li>I am a list item.</li> <li>I am a list item.</li> <li>I am a list item.</li> </ol> 

• w3schools参考
• w3schools的例子