是否可以使用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：

顺序属性是灵活的盒子布局模块的子属性。

默认情况下，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

不过，也有相当多的polyfills可以用来为旧版浏览器带来支持，如果你需要支持旧版浏览器