CSS counters：打造多功能列表的秘密武器

2023-10-29 10:20:36

CSS counters是一个强大的CSS属性，允许您创建多功能的、可定制的列表。它可以轻松实现递增计数器、循环列表、嵌套列表和各种复杂的列表样式。

1. 递增计数器

CSS counters最基本的功能之一是创建递增计数器。您可以通过设置counter-reset属性来初始化一个计数器，然后使用counter-increment属性来递增计数器。例如：

ol {
  counter-reset: my-counter;
}

li {
  counter-increment: my-counter;
}

li:before {
  content: counter(my-counter) ". ";
}

这段CSS代码会在列表的每个项目前添加一个递增的数字。您可以通过修改counter-reset属性的值来更改计数器的初始值。

2. 循环列表

CSS counters还可以用于创建循环列表。您可以通过设置counter-reset属性的第二个参数来指定计数器的循环次数。例如：

ol {
  counter-reset: my-counter 10;
}

li {
  counter-increment: my-counter;
}

li:before {
  content: counter(my-counter) ". ";
}

这段CSS代码会创建一个循环列表，从1到10的数字循环显示。您可以通过修改counter-reset属性的第二个参数的值来更改循环次数。

3. 嵌套列表

CSS counters还可以用于创建嵌套列表。您可以通过将counter-reset属性应用于嵌套列表的父元素来实现这一点。例如：

ol {
  counter-reset: my-counter;
}

li {
  counter-increment: my-counter;
}

li:before {
  content: counter(my-counter) ". ";
}

ul {
  counter-reset: my-counter 1;
}

li {
  counter-increment: my-counter;
}

li:before {
  content: counter(my-counter) ". ";
}

这段CSS代码会创建一个嵌套列表，外层列表的数字从1到10循环显示，内层列表的数字从1到5循环显示。您可以通过修改counter-reset属性的第二个参数的值来更改循环次数。

4. 列表样式

CSS counters还可以用于创建各种复杂的列表样式。您可以使用counter()函数来获取计数器的值，然后将其用于设置列表项的样式。例如，您可以使用以下CSS代码来创建一个带圆圈的列表：

ol {
  counter-reset: my-counter;
}

li {
  counter-increment: my-counter;
}

li:before {
  content: "• ";
  margin-right: 5px;
}

这段CSS代码会在列表的每个项目前添加一个圆圈。您可以通过修改counter()函数的参数来获取不同的计数器值。

5. CSS变量

CSS counters还可以与CSS变量结合使用来创建更加动态的列表。您可以使用CSS变量来存储计数器的值，然后将其用于设置列表项的样式。例如，您可以使用以下CSS代码来创建一个带颜色的列表：

:root {
  --counter-color: red;
}

ol {
  counter-reset: my-counter;
}

li {
  counter-increment: my-counter;
}

li:before {
  content: counter(my-counter) ". ";
  color: var(--counter-color);
}