是否可以使用 CSS3 更改列表项的顺序？

Question

是否可以使用 CSS3 更改列表项的顺序？

例如，如果一个列表以 1、2、3、4、5 的顺序用 HTML 编码，但我希望它以 5、1、2、3、4 的顺序显示。

我正在使用 CSS 覆盖修改 Firefox 扩展，所以我不能只更改 HTML。

网页代码

 <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

原文由 RockPaperLz- Mask it or Casket 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用 flexbox 来做到这一点。

这是我为您创建的小提琴： https ://jsfiddle.net/x56hayht/

 ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}

 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

根据 csstricks：

order 属性是 Flexible Box Layout 模块的子属性。

默认情况下，弹性项目的显示顺序与它们在源文档中的显示顺序相同。

order 属性可用于更改此顺序。

句法：

命令： number

希望能帮助到你。干杯!

原文由 hdotluna 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您只需要反转，请使用：

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

原文由 a_vedenin 发布，翻译遵循 CC BY-SA 4.0 许可协议