反向排序列表的自定義編號

Question

如何為反向排序列表創建自定義計數器樣式：

C10. Item 10
C9. Item 9
C8. Item 8
C7. Item 7
C6. Item 6
C5. Item 5
C4. Item 4
C3. Item 3
C2. Item 2
C1. Item 1

我發現這個鏈接完美地描述了如何按升序實現自定義編號。 如何修改以下內容以獲得反向自定義編號並將其僅應用於特定列表？

<!DOCTYPE html>
<html>
<style>
ol.cp {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
ol.cp li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
ol.cp:before {
    display: inline-block;
    content: "C"counter(item)". ";
    counter-increment: item;
    width: 3em;
    margin-left: -2em;
}
</style>
<body>
<h2>My Items</h2>
    <p>
        <ol reversed>
            <li>item 10</li>
            <li>item 9</li>
            <li>item 8</li>
            <li>item 7</li>
            <li>item 6</li>
            <li>item 5</li>
            <li>item 4</li>
            <li>item 3</li>
            <li>item 2</li>
            <li>item 1</li>
        </ol>
    </p>
    <p>
        <ol class="cp" reversed>
            <li>item 10</li>
            <li>item 9</li>
            <li>item 8</li>
            <li>item 7</li>
            <li>item 6</li>
            <li>item 5</li>
            <li>item 4</li>
            <li>item 3</li>
            <li>item 2</li>
            <li>item 1</li>
        </ol>
    </p>
</body>

</html>

上述代碼的結果如下圖所示。 在此處輸入圖片說明

Answer 1

在不使用 JS 的情況下，我能想出的唯一解決方案主要是蠻力解決方案。 但是如果你所有的清單都在 20 或 50 以內……你想寫多少這樣的清單。 您可以匹配列表的長度並將計數器設置為該值，然后遞減計數器。

10 項清單的示例：

ol.cp {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
ol.cp li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
ol.cp li:before {
    display: inline-block;
    content:"C"counter(item)". ";
    counter-increment: item -1;
    width: 3em;
    margin-left: -2em;
}

ol.cp li:first-child:nth-last-child(10) {
    counter-reset: item 11;
}

問題是您需要為每個要匹配的長度創建一個。 這是 1-10 和一個示例 - http://jsfiddle.net/Ue7dG/

ol.cp li:first-child:nth-last-child(1) {
    counter-reset: item 2;
}
ol.cp li:first-child:nth-last-child(2) {
    counter-reset: item 3;
}
ol.cp li:first-child:nth-last-child(3) {
    counter-reset: item 4;
}
ol.cp li:first-child:nth-last-child(4) {
    counter-reset: item 5;
}
ol.cp li:first-child:nth-last-child(5) {
    counter-reset: item 6;
}
ol.cp li:first-child:nth-last-child(6) {
    counter-reset: item 7;
}
ol.cp li:first-child:nth-last-child(7) {
    counter-reset: item 8;
}
ol.cp li:first-child:nth-last-child(8) {
    counter-reset: item 9;
}
ol.cp li:first-child:nth-last-child(9) {
    counter-reset: item 10;
}
ol.cp li:first-child:nth-last-child(10) {
    counter-reset: item 11;
}

Answer 2

正如@durbnpoisn 提到的，您可以使用reversed屬性。 順序由 HTML 控制，而不是由 CSS 控制。
另外，請注意它是一個 HTML5 屬性。

對於 XHTML，您將需要 javascript。

編輯相反的是只改變計數器，而不是內容。
對於內容操作，您必須使用 javascript。

編輯 #2檢查這一點，但請注意，您必須提供列表的上限。
更改這些行：

ol{
counter-reset: item 3; /* set the upper boundry for the list, where to start the countdown */
}
/* note that i've changed it to li:before */
ol li:before{
    counter-increment: item -1; /* negative counter */
}

Answer 3

要顛倒自定義編號的順序，我們需要知道列表中項目的總數並指示計數器從該數字開始然后遞減。

根據您的示例，列表中有 10 個數字，我們將告訴計數器從 11 開始。

ol.cp {
    counter-reset: item 11;
    margin-left: 0;
    padding-left: 0;
}

然后將計數器設置為每個項目遞減 1。

ol.cp:before {
    display: inline-block;
    content: "C"counter(item)". ";
    counter-increment: item -1;
    width: 3em;
    margin-left: -2em;
}

Answer 4

創建我們的列表時，請顛倒順序：

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

反向排序列表的自定義編號

問題描述

4 個解決方案

解決方案1
1 2014-04-09 23:11:52

解決方案2
0 2014-04-09 19:19:08

解決方案3
0 2020-03-22 14:29:09

解決方案4
-1 2014-04-09 19:09:19

反向排序列表的自定義編號

問題描述

4 個解決方案

解決方案1 1 2014-04-09 23:11:52

解決方案2 0 2014-04-09 19:19:08

解決方案3 0 2020-03-22 14:29:09

解決方案4 -1 2014-04-09 19:09:19

解決方案1
1 2014-04-09 23:11:52

解決方案2
0 2014-04-09 19:19:08

解決方案3
0 2020-03-22 14:29:09

解決方案4
-1 2014-04-09 19:09:19