【CSS】实现计数器

admin

摘自：https://blog.csdn.net/u012989850/article/details/53326171

无序列表
无序列表的每个列表项都用同样的方式标记。
CSS 有三种标记样式：

示例：

li.open {list-style: circle;}
li.closed {list-style: disc;}
li.square{list-style: square;}
<ul>
  <li class="open">Lorem ipsum</li>
  <li class="closed">Dolor sit</li>
  <li class="closed">Amet consectetuer</li>
  <li class="open">Magna aliquam</li>
  <li class="square">Autem veleum</li>
</ul>

有序列表
在有序列表中，每个列表项都被标记了不同的序号。
用list-style属性指定标记样式：


示例：

ol.info {list-style: upper-latin;}

<ol class="info">
    <li>ssss</li>
    <li>ssss</li>
    <li>ssss</li>
    <li>ssss</li>
    <li>ssss</li>
</ol>

结果：
1: ssss
2: ssss
3: ssss
4: ssss
5: ssss

计数器
你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

要想计数，你必须定义一个计数器。

在计数开始前的某个元素上，设置 counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

设置每个需要计数的元素的counter-increment 属性为你的计数器名。

通过为选择器增加 :before 或 :after 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

在content属性的值中设置 counter()，在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。

正常情况下，显示计数器的元素也会递增计数器。

示例：

h3.numbered {counter-reset: mynum;}

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}

<h3 class="numbered">Numbered paragraphs</h3>
<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>

结果：
Numbered paragraphs

A: Lorem ipsum

B: Dolor sit

C: Amet consectetuer

D: Magna aliquam

E: Autem veleum