Custom numbering for a reversed ordered list

问题

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.

回答1:

The only solution I can come up with, with out using JS, is mostly a brute force solution. But if all of your lists are under 20 or 50... how ever many of these you feel like writing. 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:

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/

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;
}

回答2:

When you create our list, reverse the order:

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

回答3:

As @durbnpoisn mentioned, you can use the reversed property. the order is controlled by the HTML and not by the CSS.
Also, notice that it's an HTML5 property.

For XHTML you will need javascript.

edit The reverse is changing only the counter, not the content.
For content manipulation you must use javascript.

edit #2 Check this, but note that you must supply the upper bound for the list.
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 */
}

来源：https://stackoverflow.com/questions/22971785/custom-numbering-for-a-reversed-ordered-list

标签

html

css

html-lists

css-counter