CSS黑魔法之计数器counter的使用技巧

下面是CSS计数器的使用技巧的完整攻略。

什么是CSS计数器？

CSS计数器是CSS3中引入的功能之一，它允许开发者在CSS中创建自己的计数器（或文件），并通过使用CSS规则在元素中自动更新该计数器的值。

CSS计数器可以用于实现很多功能，比如实现无序列表的自动编号、制作目录、网页翻书效果等等。

计数器的使用方法

创建计数器

首先，我们需要用counter-reset创建一个计数器，然后将其与一个伪元素（如:before和:after）结合使用，将计数器的值插入到文本中。

例如，创建一个自动编号的无序列表，我们可以这样定义样式：

ul {
  counter-reset: my-counter;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li:before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
  margin-right: 5px;
}

其中，counter-reset: my-counter;创建了一个名为my-counter的计数器，而li:before则是用来给li元素的前面加上计数器的值和一个点号。这里的counter-increment: my-counter;是在每一个li元素中将计数器的值加一，而content: counter(my-counter) ". ";则是将计数器的值插入到文本内容中。

多级计数器

为了创建多级编号，我们可以使用父母元素的计数器来控制子元素的计数器。例如，我们可以创建一个自动编号的上级列表，和一个自动编号的下级列表，下级列表的计数器值是从上级列表的计数器值中继承过来的。

ol {
  counter-reset: section;
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
}

li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
  font-weight: bold;
}

ol ol {
  counter-reset: subsection;
}

ol ol li:before {
  counter-increment: subsection;
  content: counters(section, ".") "." counters(subsection, ".") " ";
  font-weight: normal;
}

在上面的代码中，我们首先创建了一个名为section的计数器，然后在每一个li元素中将其加一，但是这里的content不同于之前的例子，而是使用了counters(section, ".") " "，它能够自动继承父级列表中的计数器值并添加点号和空格。

然后我们创建了一个自动编号的下级列表，为了使其继承上级列表的计数器值，我们需要将其重置为subsection，然后在每个li元素中将其计数器的值加一，最后使用counters函数插入计数器的值和点号。由于我们不再需要粗体样式，故针对下级列表的样式应该是：font-weight: normal;。

示例说明

示例一：自动编号无序列表

ul {
  counter-reset: my-counter;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li:before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
  margin-right: 5px;
}

在这个示例中，首先使用counter-reset创建了一个名为my-counter的计数器，然后给li:before使用counter-increment将计数器的值递增，并将计数器的值插入到文本内容中。

示例二：自动编号多级有序列表

ol {
  counter-reset: section;
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
}

li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
  font-weight: bold;
}

ol ol {
  counter-reset: subsection;
}

ol ol li:before {
  counter-increment: subsection;
  content: counters(section, ".") "." counters(subsection, ".") " ";
  font-weight: normal;
}

这个示例中，我们首先创建了一个名为section的计数器，在每个li元素中将其加一，并在content中使用counters函数将其值插入到文本内容中。

接下来，我们创建了一个下级有序列表，将其重置为subsection，并在li:before样式中递增其计数器的值，最后使用counters函数插入计数器的值和点号。同时由于下级列表的样式不同于上级，我们需要将字号设为正常，并将font-weight样式设置为normal。