Question

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

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

我使用CSS叠加层来修改Firefox扩展程序，因此我无法更改HTML。

HTML代码

＆＃13;

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

＆＃13;

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

是的，您可以使用灵活的盒子模型的order css属性。请注意，父元素必须设置display:flex

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -moz-flex-flow: wrap;
  -webkit-flex-flow: wrap;
  flex-flow: wrap;
}
ul li {
  width: 100%
}
ul li:nth-of-type(1) {
  order: 2;
}
ul li:nth-of-type(2) {
  order: 3;
}
ul li:nth-of-type(3) {
  order: 4;
}
ul li:nth-of-type(4) {
  order: 5;
}
ul li:nth-of-type(5) {
  order: 1;
}

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

另请注意，并非所有浏览器都支持此处概述的灵活方框模型... http://caniuse.com/#feat=flexbox

但是，如果您需要支持旧版浏览器，可以使用相当多的polyfill来支持旧版浏览器

Answer 3

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

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

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

3 个答案: