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

CSS を使用した逆順の HTML リストの表示

Web 開発では、リストを特定の順序で表示することが必要になることがよくあります。よくあるリクエストの 1 つは、項目が降順で表示される逆順リストを作成することです。 CSS を使用してこれを実現する方法は次のとおりです。

方法 1: 回転

この方法では、リストの親要素 (多くの場合、

または < ) を回転します。 ol> タグ) を 180 度回転させてから、子リストに均等かつ逆の回転を適用します。 items.

CSS:

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

方法 2: order プロパティを使用した Flexbox

Flexbox と order プロパティの使用リストの順序をより直接的に制御できるようになりますitems.

CSS:

ul {
    display: flex;
    flex-direction: column;
}
ul > li {
    order: -n;
}

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

技術的には逆転しません順序は、カウンタインクリメントと擬似要素を使用して、逆順序をシミュレートできます。 list.

CSS:

ul {
    list-style-type: none;
    counter-reset: item 6;
}
ul > li {
    counter-increment: item -1;
}
ul > li:after {
    content: counter(item);
}

例: リンクをクリックすると、上記のメソッドのライブ デモンストレーションが表示されます。

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