CSS计数器简介

来自菜鸟教程
跳转至：导航、​搜索

介绍

在编程中，counters 是变量，其值根据可定制的规则递增。 它们有很多用途，例如通过存储循环已执行的次数来帮助密切关注 loops。 尽管在编程语言中经常使用计数器，但传统上并未将计数器包含在 级联样式表 (CSS) 的语法中。 在现代 CSS 出现之前，出于样式目的跟踪页面上的元素要么在标记中手动完成，要么使用 JavaScript 来统计。 但是现在，CSS 有一个得到很好支持的计数器属性，它可以在没有 JavaScript 的情况下跟踪增量。

在本教程中，您将通过使用 CSS 计数器对超文本标记语言 (HTML) 文档中的 section 元素进行编号并计算 table 元素中的行数来了解 CSS 计数器的基础知识.

先决条件

为页面的部分编号

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

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

nano index.html

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

索引.html 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Introduction to CSS Counters</title>
    <link rel="stylesheet" type="text/css" href="counter.css">
  </head>

  <body>
    <section>
      <h2>Ratings</h2>
      Insert a table with reptile ratings on it...
    </section>

    <section>
      <h2>Alligators</h2>
      Insert facts about alligators here...
    </section>

    <section>
      <h2>Turtles</h2>
      Insert facts about turtles here...
    </section>

    <section>
      <h2>Snakes</h2>
      Insert facts about snakes here...
    </section>
  </body>

</html>

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

保存并关闭文件。 在浏览器中打开index.html，你会发现如下：

如果你想在这个 HTML 中给每个 section 编号，你可以在每个 h2 前面加上标记中的数字，如下所示： 

...
    <section>
      <h2>1. Ratings</h2>
      Insert a table with reptile ratings on it...
    </section>

    <section>
      <h2>2. Alligators</h2>
      Insert facts about alligators here...
    </section>
...

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

要自动编号，您可以使用 CSS 计数器。

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

nano counter.css

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

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

计数器.css 

body {
  counter-reset: sectionCounter;
}

在此代码中，您使用 counter-reset 来初始化名为 sectionCounter 的计数器。 此时，sectionCounter 等于 0。

您可以通过将整数传递给计数器名称后的 counter-reset 属性来显式声明初始化值。 例如，counter-reset: sectionCounter 2 将使用 2 的值初始化 sectionCounter 计数器。 如果不指定整数值，则计数器值默认为0。

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

计数器.css 

body {
  counter-reset: sectionCounter;
}

section {
  counter-increment: sectionCounter;
}

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

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

计数器.css 

body {
  counter-reset: sectionCounter;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

您使用 ::before 伪元素 在每个 h2 标题之前添加一个元素。 要设置新元素的内容，您使用了 content 属性和 counter() 函数。 此函数将 sectionCounter 的值作为 字符串 返回。 将第二个字符串传递给 content 将连接字符串，因此这将打印 sectionCounter 的值，后跟 . 和一个空格。

保存并关闭文件。 刷新您的网络浏览器，您将拥有类似的部分标题 1. 收视率和 2. 鳄鱼 ：

那不是全部; 计数器无法添加和删除新部分以及重新排序它们，因此如果您更改顺序，您将不必重新编号。

要尝试此操作，请打开您的 HTML 文件： 

nano index.html

切换 Turtles 和 Snakes 部分的顺序：

索引.html 

...
  <body>
    <section>
      <h2>Ratings</h2>
      Insert a table with reptile ratings on it...
    </section>

    <section>
      <h2>Alligators</h2>
      Insert facts about alligators here...
    </section>

    <section>
      <h2>Snakes</h2>
      Insert facts about snakes here...
    </section>

    <section>
      <h2>Turtles</h2>
      Insert facts about turtles here...
    </section>

  </body>
...

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

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

计算表中的行数

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

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

在计算 table 中的行之前，您需要使用 table。 打开你的 HTML 文件： 

nano index.html

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

索引.html 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Introduction to CSS Counters</title>
    <link rel="stylesheet" type="text/css" href="counter.css">
  </head>

  <body>
    <section>
      <h2>Ratings</h2>
      <table border="1" cellpadding="5">
        <thead>
          <tr>
            <th>Reptile</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alligator</td>
            <td>9001</td>
          </tr>
          <tr>
            <td>Turtle</td>
            <td>223</td>
          </tr>
          <tr>
            <td>Snake</td>
            <td>3.14</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Rows</th>
            <th class="total"></th>
          </tr>
        </tfoot>
      </table>
    </section>

    <section>
      <h2>Alligators</h2>
      Insert facts about alligators here...
    </section>
...

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

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

现在，打开你的 CSS 文件： 

nano counter.css

和以前一样，您需要启动一个零值的计数器。 但这一次，添加一个名为 rowCounter 的新计数器：

计数器.css 

body {
  counter-reset: sectionCounter;
  counter-reset: rowCounter;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

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

计数器.css 

body {
  counter-reset: sectionCounter;
  counter-reset: rowCounter;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

table tbody tr {
  counter-increment: rowCounter;
}

您使用 table tbody tr 选择器选择 tbody 中的所有 tr 元素，然后使用 counter-increment 属性，但这次使用 [ X147X] 计数器。

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

计数器.css 

body {
  counter-reset: sectionCounter;
  counter-reset: rows;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

table tbody tr {
  counter-increment: rowCounter;
}

table .total::before {
  content: counter(rowCounter);
}

和以前一样，您使用 ::before 伪元素将 rowCounter 的值添加为新字符串。 由于这是在计数增加后声明的，因此它将报告总行数。

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

现在您的 table 将始终报告它包含多少行。 向标记添加或删除行将产生更新的总数。 这甚至在使用 JavaScript 来操作 DOM 时也有效。

结论

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

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

取自“https://cainiaojiaocheng.com/index.php?title=CSS计数器简介&oldid=26263”
Powered by MediaWiki