舉例說明只用html和css如何使得一個列表編號倒序？

王铁柱6發表於2024-12-11
HTMLCSS

HTML 和 CSS 本身無法直接實現列表編號倒序。ol 元素的 reversed 屬性可以實現倒序編號，但這依賴於 HTML 的功能，而不是純粹的 CSS。

要僅使用 HTML 和 CSS 實現視覺上的倒序編號效果，你需要一些技巧，最常見的是使用 CSS 的 counter-reset 和 counter-increment 屬性結合偽元素 ::before 來手動建立編號。

以下是一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reversed List with CSS</title>
    <style>
        ol {
            list-style: none; /* 移除預設編號 */
            counter-reset: list-item 5; /* 設定計數器初始值，例如列表有5項，就設定為5 */
        }

        li {
            position: relative; /* 為了讓偽元素::before相對於li定位 */
        }

        li::before {
            content: counter(list-item) ". "; /* 顯示計數器值 */
            counter-increment: list-item -1; /* 每次遞減1 */
            position: absolute;
            left: -20px; /* 調整編號位置 */
        }
    </style>
</head>
<body>

    <ol>
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
        <li>Item D</li>
        <li>Item E</li>
    </ol>

</body>
</html>

解釋：

  1. list-style: none;: 移除預設的列表編號樣式。
  2. counter-reset: list-item 5;: 初始化一個名為 list-item 的計數器，並將其值設定為列表項的數量 (這裡是 5)。 這是關鍵步驟，你需要根據列表項的數量手動設定初始值。
  3. li::before: 在每個列表項前面插入一個偽元素。
  4. content: counter(list-item) ". ";: 使用 counter(list-item) 函式顯示計數器的當前值，並在後面新增一個點和空格。
  5. counter-increment: list-item -1;: 使計數器每次遞減 1，實現倒序編號的效果。
  6. position: absolute; 和 left: -20px;: 用於調整編號的位置，使其與列表項對齊。

侷限性：

  • 需要手動設定 counter-reset 的初始值，如果列表項的數量是動態的，就需要使用 JavaScript 來動態設定。

更靈活的 JavaScript 方案 (如果可以使用的話):

雖然題目要求只使用 HTML 和 CSS，但如果可以使用 JavaScript，可以更靈活地實現倒序編號，並且不需要手動設定計數器初始值：

const listItems = document.querySelectorAll('ol li');
const numItems = listItems.length;

for (let i = 0; i < numItems; i++) {
  listItems[i].innerHTML = (numItems - i) + ". " + listItems[i].innerHTML;
}

這段 JavaScript 程式碼會獲取所有列表項，然後迴圈遍歷它們，根據列表項的總數和當前索引計算倒序編號，並將其新增到列表項的內容前面。 這種方法更動態，更適合列表項數量不固定的情況。

希望這個例子能幫助你理解如何使用 CSS 實現列表的視覺倒序編號效果。 記住，純 CSS 方案需要手動設定計數器初始值，而 JavaScript 可以提供更動態的解決方案。

相關文章