关于前端:使用CSS计数器花式玩转列表编号

在网页设计中，以有组织的形式示意数据十分重要，这样用户能够轻松地理解网站或内容的构造。最简略的办法是应用有序列表。

如果你须要对数字的外观进行更多的管制，你可能会认为你须要通过HTML或JavaScript在DOM中增加更多的元素，并对其进行款式化。侥幸的是，CSS计数器为你省去了很多麻烦。

在本教程中，咱们将演示如何开始应用CSS计数器并介绍一些用例。

相干浏览：应用CSS ::marker的自定义我的项目符号

有序列表的问题

当编写如下所示的有序列表时，浏览器会主动显示数字。

<ol>  <li>My First Item</li>  <li>My Second Item</li>  <li>My Third Item</li></ol>

这很好，但它不容许你对数字进行款式化。例如，假如你须要把数字放在一个圆圈内。你会怎么做呢？

一种办法是齐全解脱列表，而后本人手动增加数字。

<div>  <span>1</span> My First Item</div><div>  <span>2</span> My Second Item</div><div>  <span>3</span> My Third Item</div><style>div {  margin-bottom:10px;}div span {  display:inline-flex;  align-items:center;  justify-content:center;  width:25px;  height:25px;  border-radius:50%;  background-color:#000;  color:#fff;}</style>

这样做能够做到咱们须要它做的事件，但也有一些毛病。其一，手写数字很艰难。而且，如果你须要批改一个数字怎么办？你就得一个一个地改。你能够应用JavaScript动静增加 <span> 元素来解决这些问题，然而这样会给DOM减少更多的节点，导致内存占用重大。

在大多数状况下，最好应用CSS计数器。让咱们检查一下起因。

CSS计数器简介

CSS计数器是网页范畴变量，能够应用CSS规定更改其值。

首先，应用 counter-reset 属性设置一个计数器。 list-number 是此处要应用的变量名。

.list {  counter-reset: list-number;}

接下来，应用 counter-increment 属性减少计数器的值。

.list div {  counter-increment: list-number;}

当初，每次呈现 .list div 元素时，list-number 变量都会减少一。

最初，在内容属性和 counter() 函数中应用 :before 伪元素来显示数字。

.list div:before {  content: counter(list-number);}

这是残缺的代码：

<div class="list">  <div>My first item</div>  <div>My second item</div>  <div>My third item</div></div><style>.list {  counter-reset: list-number;}/** 留神，咱们能够在:before伪元素中应用counter-increment **/.list div:before {  counter-increment: list-number;  content: counter(list-number);}</style>

成果如下

咱们还没到那儿。让咱们设置 :before 伪元素的款式，使其看起来更好。

.list div:before {  counter-increment: list-number;  content: counter(list-number);    margin-right: 10px;  margin-bottom:10px;  width:35px;  height:35px;  display:inline-flex;  align-items:center;  justify-content: center;  font-size:16px;  background-color:#d7385e;  border-radius:50%;  color:#fff;}

成果如下

扭转终点

默认状况下，counter-reset 函数将计数器设置为 0，在第一次调用 counter-increment 函数后，从 1 开始。通过向 counter-reset 函数传递一个整数作为第二个参数来设置初始值。

.list {  counter-reset: list-number 1;}

如果要从 0 开始，请将初始值设置为 -1。

.list {  counter-reset: list-number -1;}

更改增量值

默认状况下，counter-increment 会将计数器的值减少一个。就像 counter-reset 一样，你能够为 counter-increment 属性定义一个偏移量。

在此示例中，counter-reset 将 list-number 设置为 0。每次调用 counter-increment 时，list-number 的值将减少 2，因而，你将看到数字别离为 2、4 和 6。

.list {  counter-reset: list-number;}.list div:before {  counter-increment: list-number 2;  // 其余款式}

计数器格局

counter() 函数能够具备两个参数：计数器名称和计数器格局。对于第二个参数，能够应用任何无效的 list-style-type 值，包含：

• decimal (e.g., 1, 2, 3…)
• lower-latin (e.g., a, b, c…)
• lower-roman (e.g., i, ii, iii…)

默认值为 decimal。

例如，如果您像我一样酷爱迷信，则能够应用 lower-greek 进行alpha-beta值编号。

.list div:before {  counter-increment: list-number;  content: counter(list-number, lower-greek);  // ... 其余款式}

嵌套的计数器

应用嵌套的有序列表时，编号始终以以下格局显示：

如果你须要子列表项的数字（例如 1.1），则能够将CSS计数器与 counters() 函数一起应用。

<ol>  <li>     My First Item    <ol>      <li>My Nested First Item</li>      <li>My Nested Second Item</li>    </ol>  </li>  <li>My Second Item</li></ol><style>ol {  list-style-type:none;  counter-reset:list;}ol li:before {    counter-increment:list;    content: counters(list, ".") ". ";}</style>

成果如下

请留神，咱们应用的是 counters() 函数，而不是 counter() 。

counters() 函数的第二个参数是连贯字符串。它还能够具备第三个参数来设置格局（例如希腊语或罗马语）。

带有题目的嵌套计数器

<h1>，<h2> 之类的元素未嵌套在文档中。它们显示为不同的元素，但仍代表一种层次结构。以下是将嵌套数字增加到题目之前的办法：

body {  counter-reset:h1;}h1 {  counter-reset:h2;}h1:before {  counter-increment: h1;  content: counter(h1) ". ";}h2:before {  counter-increment:h2;  content: counter(h1) "." counter(h2) ". ";}

每次找到一个 h1，h2 计数器就会重置。文档中的每一个 <h2> 都会失去一个绝对于 <h1> 的 x.y. 的数字。

浏览器反对

值得庆幸的是，自从CSS2引入CSS计数器以来，浏览器就广泛支持它们。尽管在 content 以外的属性中应用counter() 函数仍是实验性的，但你能够毫不犹豫地做咱们在本教程中波及到的所有练习。

以下是我能够应用的浏览器反对详细信息。

一个简略的挑战

你筹备好应答波及CSS计数器的简略挑战了吗？

应用CSS计数器，在10行代码中显示 1 到 1000 及其罗马字符。

如果你感到困惑，请依照以下步骤操作：

要创立1,000个 div 元素，请应用以下内容。

for (var i = 0; i < 1000; i++) {  document.body.appendChild( document.createElement("div") );  }

CSS counters：

body {  counter-reset:number;}div:before {  counter-increment:number;  content: counter(number) " => " counter(number, lower-roman);}

成果如下

你想出了什么？

论断

以下是咱们应用的属性的列表。

CSS counters 是CSS中中鲜为人知的性能，但你会诧异于它的应用频率。在本教程中，咱们介绍了如何以及何时应用CSS计数器，并列举了一些例子。

当然，CSS计数器是很酷。但我放心的一点是，所有的计数器都是全局的。如果你在一个有很多CSS文件的大我的项目中应用了很多，你可能会找不到它们的创立、重置和增量地位。如果能够的话，不要适度应用，如果肯定要应用的话，肯定要用描述性的名字做计数器，防止抵触。

原文：https://blog.logrocket.com
作者：Supun Kavinda