如何使用 CSS 以相反的順序顯示 HTML 清單？

使用 CSS 顯示逆序 HTML 清單

在 Web 開發中，通常需要以特定順序顯示清單。常見的請求是建立一個逆序列表，其中項目按降序顯示。以下是使用CSS 實現此目的的方法：

方法1：旋轉

此方法涉及旋轉列表的父元素（通常是

或
）。 ol> 標籤）旋轉 180 度，然後對子列表項目套用相等但相反的旋轉。

CSS:

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

方法2：具有order 屬性的Flexbox

使用Flexbox直接控制列表項的順序。

CSS:

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

方法3：使用偽元素進行反自增

技術上不能顛倒順序，但使用反自增和偽元素可以模擬逆序列表。

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中文網其他相關文章！