Html 或 Css 属性使列表的项目首先显示

Question

我正在使用 <ol> 和 <ul> 标签在 HTML 中创建一个列表。网络视图的结果如下：

1
2
3

我想使用 HTML/CSS 属性来设置第 2 个项目是第一个显示的项目，如下所示：

2
1
3

我不想更改 HTML 中 <li> 个元素的顺序。我想给 <li>2</li> 添加一个属性。 HTML/CSS 支持吗？

Answer 1

CSS 灵活的框允许您重新排序内容。

将要显示的元素放在第一组有序内容中，将所有其他列表项放在第二组中。

ol { display: flex; flex-direction: column; }
li { order: 2; }
li:nth-child(2) { order: 1; }

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ol>

我将查找 -vendor-prefix 属性以支持旧版浏览器作为 reader 的练习。

Html or Css attributes make list's item displays first