入れ子リスト

Question

の順番を変更してください。

私は複数のネスティングを持つリストを持っています。私はこれらの2つのリストの順序を変更したいと思います。これがcssだけで可能かどうか疑問に思っていますか？私は変更したい

• リスト項目1つの
• リスト項目2
  • リスト項目2.1
  • リスト項目2.2
• リスト項目3

注文：

• リスト項目1
• リスト項目2
• リスト項目3
• リスト項目2.1
• リスト項目2.2

リストの長さが動的であるので、私ができます」絶対的な位置付けやそのようなものを使用しないでください。

Answer 1

いいえ、できません。クライアント側（javascript）または裏側でレンダリングされた場所でデータを注文する必要があります。この場合、CSSは無力です

Answer 2

CSSハンドブックは、CSS Flexbox orderプロパティを使用して簡単に行うことができます。

<ul>および<li>要素のプロパティを変更する必要があります。以下のコードスニペットを見てください。

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; 
 
}

<ul class="normal-list"> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li class="nested-list"> 
 
    <ul> 
 
     <li>List Item 2.1</li> 
 
     <li>List Item 2.2</li> 
 
    </ul> 
 
    </li> 
 
    <li>List Item 3</li> 
 
    <li class="nested-list"> 
 
    <ul> 
 
     <li>List Item 3.1</li> 
 
     <li>List Item 3.2</li> 
 
    </ul> 
 
    </li> 
 
    <li>List Item 4</li> 
 
</ul>