仅使用CSS切换LI元素的顺序

Question

我需要使用CSS更新现有页面.我不允许触摸现有的HTML.我唯一的选择是创建另一个CSS/CSS3代码来覆盖现有的代码.没有JS.没有JQuery.

以下是现有HTML示例.我的目标输出是创建一个CSS/CSS3代码覆盖来反转位置,使"第二"类成为订单列表中的第一个.

我开始谷歌搜索这个,但我找不到任何好的资源.所以我只是认为可能有一个CSS3代码可以像我想象的CSS代码那样做:

HTML:

<ul id="mainList">
    <li class="first">i am first</li>
    <li class="second">i am second</li>
    <li class="third">i am third</li>
</ul>

走出这个世界的CSS代码:

.second {
    list-position: rank(1);
}
.first {
    list-position: rank(2);
}

任何建议将不胜感激.

在这里小提琴 - > http://jsfiddle.net/philcyb/mL41up6t/

Answer 1

您可以使子li元素成为flexbox项,然后使用该order属性更改元素的可视顺序.

在这种情况下,您可以为第二个元素order赋值-1,使其首先出现.

更新的示例

#mainList {
    display: flex;
    flex-direction: column;
}
.second {
    order: -1;
}

<ul id="mainList">
    <li class="first">I am first</li>
    <li class="second">I am second</li>
    <li class="third">I am third</li>
</ul>

浏览器支持可以在这里找到.你用css3标记了你的问题,所以我怀疑浏览器支持是一个问题,因为它目前在flexboxes约为93.03%.

作为旁注,您还可以使用:nth-child/ :nth-of-type以按li索引选择元素而不是使用类.

#mainList {
    display: flex;
    flex-direction: column;
}
#mainList li:nth-of-type(2) {
    order: -1;
}

<ul id="mainList">
    <li>I am first</li>
    <li>I am second</li>
    <li>I am third</li>
</ul>