如何为倒序列表创建自定义计数器样式:
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
我找到了 this link它完美地描述了如何按升序实现自定义编号。我如何修改以下内容以获得反向自定义编号并将其仅应用于特定列表？
<!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>
上面代码的结果如下图所示。
最佳答案
在不使用 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;
}
关于html - 反向排序列表的自定义编号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22971785/