HTMLとCSSを使用してリストを逆の順序で表示するにはどうすればよいですか?

HTML とスタイルを使用した逆順リストの表示

CSS/SCSS では、HTML リスト内の要素の順序を逆にすることができます。さまざまな方法で:

方法 1: 回転と反転回転

この手法では、親要素を 180 度回転し、次に子要素を -180 度逆回転して、画面上の順序を効果的に逆転させます。

ul {
    transform: rotate(180deg);
}

ul > li {
    transform: rotate(-180deg);
}

方法 2: Order プロパティを使用したフレックスボックス

フレックスボックスは、次のことを制御する機能を提供します。 order プロパティを使用して要素の順序を指定します。子要素に負の順序値を設定すると、リスト内で逆の順序で配置できます。

方法 3: 擬似要素によるカウンタインクリメント

順序の真の反転ではありません。このメソッドはカウンタインクリメントと疑似要素を使用して項目番号を逆に表示します。 order.

ul {
    list-style-type: none;
    counter-reset: item 6;
}

ul > li {
    counter-increment: item -1;
}

ul > li:after {
    content: counter(item);
}

例:

方法 1 を使用した逆順リストの例を次に示します:

<ul>
  <li>1. I am a list item.</li>
  <li>2. I am a list item.</li>
  <li>3. I am a list item.</li>
  <li>4. I am a list item.</li>
  <li>5. I am a list item.</li>
</ul>

実際の結果:

5. I am a list item.
4. I am a list item.
3. I am a list item.
2. I am a list item.
1. I am a list item.

以上がHTMLとCSSを使用してリストを逆の順序で表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。