CSS 计数器简介

简介

在编程中，_counters_是一个变量，它的值根据可定制的规则递增。它们有很多用途，例如通过存储循环执行的次数来帮助监视循环。虽然计数器在编程语言中经常使用，但传统上并不包含在层叠样式表（CSS)的语法中。在现代CSS出现之前，出于样式目的跟踪页面上的元素要么在标记中手动完成，要么使用JavaScript进行统计。但是现在，CSS有了一个支持良好的counter属性，可以在没有JavaScript的情况下跟踪增量。

在本教程中，您将通过使用它们对超文本标记语言(HyperText Markup Language，HTML)文档中的section元素进行编号，并对able元素中的行数进行求和，来遍历CSS计数器的基本知识。

前提条件

  • 本地计算机上另存为index.html的HTML文件，您可以从您选择的Web浏览器访问该文件。要开始，请查看我们的[如何设置您的HTMLHTMLTM]教程，并按照[如何使用和理解HTMLHTMLTM]获取如何在您的浏览器中查看Project](https://andsky.com/tech/tutorials/how-to-set-up-your-html-project)的说明。如果你是HTML语言的新手，可以试试完整的如何在HTML中构建网站]系列。

对页面各部分进行编号

为了演示计数器在CSS中的工作方式，您将首先使用样式表将一个数字附加到您的HTML中的多个section元素。使用计数器，您将使每个新部分的数字递增一。

首先，使用您选择的文本编辑器打开index.html文件。在本教程中，您将使用Nan：

1nano index.html

打开文件后，添加以下HTML以创建网站的语义结构，在我们的示例中是关于爬行动物的信息表：

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4
 5  <head>
 6    <meta charset="utf-8">
 7    <title>Introduction to CSS Counters</title>
 8    <link rel="stylesheet" type="text/css" href="counter.css">
 9  </head>
10
11  <body>
12    <section>
13      <h2>Ratings</h2>
14      Insert a table with reptile ratings on it...
15    </section>
16
17    <section>
18      <h2>Alligators</h2>
19      Insert facts about alligators here...
20    </section>
21
22    <section>
23      <h2>Turtles</h2>
24      Insert facts about turtles here...
25    </section>
26
27    <section>
28      <h2>Snakes</h2>
29      Insert facts about snakes here...
30    </section>
31  </body>
32
33</html>

在这段代码中，您使用section元素创建了站点的四个部分，标题设置为h2标题。您还在head中添加了一个link元素，该元素连接到CSS文件counter.css，您将很快创建该文件。

保存并关闭该文件。在浏览器中打开index.html，可以看到如下内容：

使用四个sections呈现超文本标记语言

如果您想对此HTML中的每个section进行编号，您可以在每个h2前面加上标记中的数字，如下所示：

 1...
 2    <section>
 3      <h2>1. Ratings</h2>
 4      Insert a table with reptile ratings on it...
 5    </section>
 6
 7    <section>
 8      <h2>2. Alligators</h2>
 9      Insert facts about alligators here...
10    </section>
11...

虽然当你有一个小的固定数量的节时，这是一个很好的解决方案，但当你有几十个甚至几百个节时，这将变得乏味和容易出错。此外，当您需要重新排序部分时，复杂性会迅速增加。

要自动执行此编号，可以使用CSS计数器。

在与index.html相同的目录下创建并打开您的Counter.css文件：

1nano counter.css

Css中的计数器的行为类似于传统编程语言中的variables。使用CSS计数器的第一步是初始化计数器，这会为计数器命名并设置初始值。

将以下代码添加到文件中：

1[label counter.css]
2body {
3  counter-reset: sectionCounter;
4}

在这段代码中，您使用Counter-Reset初始化名为sectionCounter的计数器。此时，sectionCounter等于0。

您可以通过在计数器名称后将一个整数传递给Counter-Reset属性来显式声明初始化值。例如，count-Reset：sectionCounter 2会将sectionCounter计数器的值初始化为2。如果不指定整数值，则计数器默认为`0‘。

现在您已经初始化了计数器，您可以设置计数器如何递增。对于每个区段，您需要将计数器递增`1‘。为此，添加以下突出显示的代码：

1[label counter.css]
2body {
3  counter-reset: sectionCounter;
4}
5
6section {
7  counter-increment: sectionCounter;
8}

在这段代码中，您选择了所有具有counter-increment属性的section元素。这意味着每当CSS遇到一个section元素时，它将递增计数器。将属性设置为sectionCounter会选择递增名为sectionCounter的计数器。默认情况下，计数器递增1，但如果您希望指定增量，则可以在sectionCounter后添加一个整数，并以空格分隔。

初始化计数器并设置增量逻辑后，您现在可以使用计数器了。要使用计数器的值，请使用Content属性将该值添加到标题h2：

 1[label counter.css]
 2body {
 3  counter-reset: sectionCounter;
 4}
 5
 6section {
 7  counter-increment: sectionCounter;
 8}
 9
10h2::before {
11  content: counter(sectionCounter) ". ";
12}

您使用：：beprepseudo-element在每个h2标题前添加了一个元素。要设置新元素的内容，您可以使用content属性，与count()函数配合使用。此函数以string.形式返回sectionCounter的值向Content传递第二个字符串将连接该字符串，因此这将打印sectionCounter的值，后跟一个.和一个空格。

保存并关闭该文件。刷新你的网页浏览器，你会看到类似1.评级 和** 2.鳄鱼** 这样的章节标题：

带有数字的部分prepended

这还不是全部；计数器不影响添加和删除新部分以及对它们重新排序，因此如果更改顺序，您将不必重新编号。

要尝试此功能，请打开您的HTML文件：

1nano index.html

切换Turtles和Snakes段的顺序：

 1[label index.html]
 2...
 3  <body>
 4    <section>
 5      <h2>Ratings</h2>
 6      Insert a table with reptile ratings on it...
 7    </section>
 8
 9    <section>
10      <h2>Alligators</h2>
11      Insert facts about alligators here...
12    </section>
13
14    <section>
15      <h2>Snakes</h2>
16      Insert facts about snakes here...
17    </section>
18
19    <section>
20      <h2>Turtles</h2>
21      Insert facts about turtles here...
22    </section>
23
24  </body>
25...

保存并关闭该文件。重新加载浏览器，您会发现以下内容：

带有蛇节和龟节switched的HTML示例

在本节中，您使用了CSS计数器来自动执行HTML文档中带编号的部分。接下来，您将使用able元素演练一个示例，以说明如何使用计数器进行总计计算。

统计表中的行数

除了在HTML文档中自动编号之外，您还可以将CSS计数器用于任何涉及定期递增的任务。为了演示这一点，您将使用计数器来存储table元素中的行数，然后在表中显示总数。

计算table中的行数或tr元素的数量类似于在本教程的前一部分中向每个section元素添加数值的方式。最大的区别在于，重要的部分是总值，而不是每一行的值。

在计算表‘中的行数之前，您需要一个表’来处理。打开您的HTML文件：

1nano index.html

现在添加以下突出显示的行，以在 Ratings section中创建表格：

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4
 5  <head>
 6    <meta charset="utf-8">
 7    <title>Introduction to CSS Counters</title>
 8    <link rel="stylesheet" type="text/css" href="counter.css">
 9  </head>
10
11  <body>
12    <section>
13      <h2>Ratings</h2>
14      <table border="1" cellpadding="5">
15        <thead>
16          <tr>
17            <th>Reptile</th>
18            <th>Rating</th>
19          </tr>
20        </thead>
21        <tbody>
22          <tr>
23            <td>Alligator</td>
24            <td>9001</td>
25          </tr>
26          <tr>
27            <td>Turtle</td>
28            <td>223</td>
29          </tr>
30          <tr>
31            <td>Snake</td>
32            <td>3.14</td>
33          </tr>
34        </tbody>
35        <tfoot>
36          <tr>
37            <th>Rows</th>
38            <th class="total"></th>
39          </tr>
40        </tfoot>
41      </table>
42    </section>
43
44    <section>
45      <h2>Alligators</h2>
46      Insert facts about alligators here...
47    </section>
48...

您使用了able元素来创建表，使用tr元素来确定表行，使用td元素来用数据点填充行。注意thead、tbody和tFoot的用法。虽然不是必需的，但这些元素将行分组为语义节，您可以使用语义节来更好地定位tbody节中的行，并省略页眉或页脚中的任何行。最后，您使用border和cell padding属性为您的表提供了一些基本的样式。

保存并退出index.html。在浏览器中刷新页面，您会发现以下内容：

使用table的示例页面

现在，打开您的css文件：

1nano counter.css

与前面一样，您将希望使用零值启动计数器。但这一次，添加一个名为rowCounter的新计数器：

 1[label counter.css]
 2body {
 3  counter-reset: sectionCounter;
 4  counter-reset: rowCounter;
 5}
 6
 7section {
 8  counter-increment: sectionCounter;
 9}
10
11h2::before {
12  content: counter(sectionCounter) ". ";
13}

对于tbody中的每一行或tr元素，递增计数器：

 1[label counter.css]
 2body {
 3  counter-reset: sectionCounter;
 4  counter-reset: rowCounter;
 5}
 6
 7section {
 8  counter-increment: sectionCounter;
 9}
10
11h2::before {
12  content: counter(sectionCounter) ". ";
13}
14
15table tbody tr {
16  counter-increment: rowCounter;
17}

您使用了table tbody tr选择器来选择tbody中的所有tr元素，然后使用了count-increment属性，但这次使用的是rowCounter计数器。

最后，将计数器的最终值添加到类为total的列中的页脚：

 1[label counter.css]
 2body {
 3  counter-reset: sectionCounter;
 4  counter-reset: rows;
 5}
 6
 7section {
 8  counter-increment: sectionCounter;
 9}
10
11h2::before {
12  content: counter(sectionCounter) ". ";
13}
14
15table tbody tr {
16  counter-increment: rowCounter;
17}
18
19table .total::before {
20  content: counter(rowCounter);
21}

与前面一样，您使用：：bepre伪元素将rowCounter的值作为新的字符串相加。由于这是在计数递增之后声明的，因此它将报告总行数。

保存并退出CSS文件，然后在浏览器中重新加载页面以显示以下内容：

带有css counter的总行的示例页面

现在，您的‘table’将始终报告它包含多少行。向标记添加或删除行将生成更新的总计。这甚至在使用JAVASCRIPT来操作DOM.时也是有效的

结论

Css中的计数器对于显示随您的HTML中的某些元素递增的值很有用。在许多情况下，这可以完全消除将JavaScript引入页面的需要，使其成为轻量级Web项目的理想解决方案，否则不需要交互。然而，请注意，以这种方式使用CSS模糊了内容和设计之间的界限，并且没有以一种使较大的应用程序易于管理的方式分离关注点。因此，建议在更复杂的JavaScript应用程序中避免使用此方法。

如果您想了解有关网站样式的更多信息，请查看如何使用HTML构建网站]系列或我们关于如何设置样式反应Components.]的教程

Published At
Categories with 技术
Tagged with
comments powered by Disqus