自定义编号为反序列表 | 自定义编号为反序列表

本文介绍了自定义编号为反序列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何为倒序列表创建自定义计数器样式：

  C10。第10项
 C9。项目9 
 C8。第8项
 C7。项目7 
 C6。第6项
 C5。第5项
 C4。项目4 
 C3。项目3 
 C2。项目2 
 C1。第1项

我发现

  ol.cp li：first-child：nth-last-child（1）{
 counter-reset：item 2; 
} 
 ol.cp li：第一胎：第nth-last-child（2）{
 counter-reset：item 3; 
} 
 ol.cp li：第一个孩子：第n个最后一个孩子（3）{
 counter-reset：item 4; 
} 
 ol.cp li：第一胎：第nth-last-child（4）{
 counter-reset：item 5; 
} 
 ol.cp li：第一个孩子：第n个孩子（5）{
 counter-reset：item 6; 
} 
 ol.cp li：第一个孩子：第n个孩子（6）{
 counter-reset：item 7; 
} 
 ol.cp li：第一胎：第nth-last-child（7）{
 counter-reset：item 8; 
} 
 ol.cp li：第一胎：第nth-last-child（8）{
 counter-reset：item 9; 
} 
 ol.cp li：第一胎：第nth-last-child（9）{
 counter-reset：item 10; 
} 
 ol.cp li：第一胎：第nth-last-child（10）{
 counter-reset：item 11; 
}

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.

解决方案

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

这篇关于自定义编号为反序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！