css实现计数器

无序列表

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

示例：

li.open {list-style: circle;}
li.closed {list-style: disc;}

<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="closed">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

更多文章请前往我的个人博客：zhiheng博客

或者我的关注微信公众号： zhiheng博客