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

Question

How can I create custom counter styles for a reversed ordered list:如何为反向排序列表创建自定义计数器样式：

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

I found this link which perfectly describes how to achieve a custom numbering in ascending order.我发现这个链接完美地描述了如何按升序实现自定义编号。 How can I modify the following to get a reverse custom numbering and apply it to only a specific listing?如何修改以下内容以获得反向自定义编号并将其仅应用于特定列表？

<!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>

The result of the above code is illustrated in the following picture.上述代码的结果如下图所示。 在此处输入图片说明

Answer 1

The only solution I can come up with, with out using JS, is mostly a brute force solution.在不使用 JS 的情况下，我能想出的唯一解决方案主要是蛮力解决方案。 But if all of your lists are under 20 or 50... how ever many of these you feel like writing.但是如果你所有的清单都在 20 或 50 以内……你想写多少这样的清单。 You can match the length of the list and set the counter to that value then decrement the counter.您可以匹配列表的长度并将计数器设置为该值，然后递减计数器。

example for list of 10 items: 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;
}

the problem is you need to create one for each length you want to match.问题是您需要为每个要匹配的长度创建一个。 Here are 1-10 and a sample - http://jsfiddle.net/Ue7dG/这是 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

As @durbnpoisn mentioned, you can use the reversed property.正如@durbnpoisn 提到的，您可以使用reversed属性。 the order is controlled by the HTML and not by the CSS.顺序由 HTML 控制，而不是由 CSS 控制。
Also, notice that it's an HTML5 property.另外，请注意它是一个 HTML5 属性。

For XHTML you will need javascript.对于 XHTML，您将需要 javascript。

edit The reverse is changing only the counter, not the content.编辑相反的是只改变计数器，而不是内容。
For content manipulation you must use javascript.对于内容操作，您必须使用 javascript。

edit #2 Check this, but note that you must supply the upper bound for the list.编辑 #2检查这一点，但请注意，您必须提供列表的上限。
Change these lines:更改这些行：

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

To reverse the order of custom numbering, we need to know the total number of items in the list and instruct the counter to start from that number and then decrement.要颠倒自定义编号的顺序，我们需要知道列表中项目的总数并指示计数器从该数字开始然后递减。

From your example, with 10 numbers in the list, we'll tell the counter to start at 11.根据您的示例，列表中有 10 个数字，我们将告诉计数器从 11 开始。

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

And then set the counter to decrement by 1 on each item.然后将计数器设置为每个项目递减 1。

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

Answer 4

When you create our list, reverse the order:创建我们的列表时，请颠倒顺序：

<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