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

Question

例如，如果列表在 HTML 中按 1,2,3,4,5 顺序编码，但我希望它按 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 来做到这一点。

这是我为您创建的 fiddle：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:

订单属性是灵活框布局模块的子属性。

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

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

语法：

订单：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 更改列表项的顺序？

Is it possible to change the order of list items using CSS3?

html

css

firefox

firefox-addon