反向排序列表的自定义编号

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