乐趣区

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

jiezi

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

如果你须要对数字的外观进行更多的管制，你可能会认为你须要通过 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 计数器，并列举了一些例子。

属性 应用
counter-reset 将计数器重置（或创立）为给定值（默认为 0）
counter-increment 给定计数器减少给定偏移量（默认为 1）
counter(counter-name, counter-format) 从给定格局获取计数器的值
counters(counter-name, counter-string, counter-format) 从给定的格局获取嵌套计数器的值

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

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

退出移动版