更改嵌套列表的顺序

Question

嗨，谢谢你的检查。

我有一个列表，它有多个嵌套。我想改变这两个列表的顺序，我想知道只有css才有可能吗？

• 列出项目1
• 列出项目2
  • 清单项目2.1
  • 清单项目2.2
• 列出项目3

我想将订单更改为：

• 列出项目1
• 列出项目2
• 列出项目3
• 清单项目2.1
• 清单项目2.2

由于列表的长度是动态的，我不能使用绝对定位或类似的东西。

Answer 1

不，你不能。你必须在客户端（javascript）或背面订购数据。在这种情况下，CSS很无奈

Answer 2

这是一个棘手的问题，但您可以通过使用CSS Flexbox TotpSecurityStampBasedTokenProvider属性来实现这一目标。

您需要更改order和<ul>元素的属性。请查看下面的代码段。

＆＃13;

＆＃13;

<li>

＆＃13;

body {
  padding: 2em;
}

/* Resetting properties of <ul> */
ul {
  padding: 0;
  margin: 0;
  list-style: disc;
}

/* Applying Flex properties to <ul> */
ul.normal-list {
  display: flex;
  flex-direction: column;
}

/* Changing the order of all the <li>s except the <ul> with the class 'nested-list'  */
li.nested-list {
  order: 1;
}

＆＃13;

＆＃13;

＆＃13;