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

Question

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

例如,如果列表以1,2,3,4,5顺序编码为HTML,但我希望它以5,1,2,3,4顺序显示.

我正在使用CSS覆盖来修改Firefox扩展,所以我不能只改变HTML.

HTML代码

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

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模块的子属性.

默认情况下,Flex项目的显示顺序与它们在源文档中显示的顺序相同.

订单属性可用于更改此排序.

句法:

订购: number

希望能帮助到你.干杯!

Answer 2

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

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