css - 仅使用 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>

Out of this world CSS 代码:

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

任何建议将不胜感激。

在这里 fiddle -> http://jsfiddle.net/philcyb/mL41up6t/

Answer 1

您可以使子元素 li 元素 flexbox items然后使用 order property更改元素的视觉顺序。

在这种情况下，您可以为第二个元素赋予 -1 的 order 值，以便它首先出现。

Updated Example

#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>

浏览器支持可以是found here .您用 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>