Question

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

以下是现有HTML示例。我的目标输出是创建一个CSS / CSS3代码覆盖来反转位置，带来＆＃34;秒＆＃34; class最多是订单列表中的第一个。

我开始谷歌搜索这个，但我找不到任何好的资源。所以我只是认为可能有一个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);
}

任何建议都将不胜感激。

这里小提琴 - ＆gt; http://jsfiddle.net/philcyb/mL41up6t/

Answer 1

Josh的回答很完美！我刚才使用的另一个注意事项是：对于移动设备（例如iphone）和其他浏览器的兼容性，我添加了以下CSS代码，以使其更兼容。

#mainList {
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    flex-direction: column !important;
}
#mainList li:nth-of-type(2) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
#mainList li:nth-of-type(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

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

1 个答案: