css 实现计数器

Counters are a big part of programming. They help keep tabs on loops by storing the number of times it’s been executed. Common variable names for increment counters are i, j and k. Before the days of modern CSS, keeping track of things on the page was either done manually in the markup, or by using JavaScript to tally things up. These days are long gone as CSS has a well supported counter property that makes things easy.

计数器是编程的重要组成部分。 它们通过存储执行次数来帮助保持循环。 增量计数器的常见变量名是i ， j和k 。 在现代CSS时代来临之前，跟踪页面上的内容要么是在标记中手动完成的，要么是使用JavaScript进行汇总。 由于CSS具有良好支持的counter属性，使事情变得简单，因此这些日子已经一去不复返了。

页面的编号部分 (Numbering Sections of a Page)

To get started with counters, imagine you have a page that has multiple <section> tags, each with it’s own heading <h2> and content. That page may look something like this:

要开始使用计数器，请假设您有一个包含多个<section>标记的页面，每个标记都有自己的标题<h2>和内容。 该页面可能看起来像这样：

<section>
  <h2>Ratings</h2>
  Insert a table with reptile ratings on it...
</section>
<section>
  <h2>Alligators</h2>
  Insert awesome facts about alligators here...
</section>
<section>
  <h2>Turtles</h2>
  Insert interesting facts about turtles here...
</section>
<section>
  <h2>Snakes</h2>
  Insert sketchy facts about snakes here...
</section>

If you wanted to number each <section> you could simply prefix each <h2> with the number right in the markup. While a great solution when you have a small fixed number of sections, things fall apart quickly when you have tens or even hundreds of sections. The complexity compounds quite quickly the moment you need to reorder the sections.

如果您想为每个<section>编号，则可以在标记中为每个<h2>加上数字前缀。 当您拥有固定数量的部分时，这是一个很好的解决方案，但是当您拥有数十甚至数百个部分时，事情很快就会崩溃。 当您需要重新排序各部分时，复杂性很快就形成了。

To alleviate this burden, we can use CSS counters. The first step to using CSS counters is to initialize a counter, which sets the value to zero 0:

为了减轻这种负担，我们可以使用CSS计数器。 使用CSS计数器的第一步是初始化一个计数器，该计数器将值设置为零0 ：

body {
  counter-reset: sections;
}

For each section, we will want to increment the counter by 1:

对于每个部分，我们将希望将计数器增加1 ：

section {
  counter-increment: sections;
}

To use the counter’s value, we can use the content property to prepend the value to the heading h2:

要使用计数器的值，我们可以使用content属性将值添加到标题h2 ：

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

Now we’ll have section headings like 1. Ratings and 2. Alligators. That’s not all, the counter is impervious to adding and removing new sections as well as reordering them!

现在，我们将获得诸如1. Ratings和2. Alligators类的标题。 不仅如此，添加和删除新部分以及重新排列它们的计数器是不可渗透的！

计算表中的行数 (Counting the Number of Rows in a Table)

Counting the number of rows <tr> in a <table> is quite similar to how we added a numerical value to each section on the page. The big difference will be that we are only interested in the total value, and not the value for each row.

计算<table> <tr>的行数与我们向页面的每个部分添加数值非常相似。 最大的不同是我们只对总价值感兴趣，而不对每一行的价值感兴趣。

Before we can tally up the rows in a <table>, we will need a <table> to work with:

在计算出<table>的行之前，我们需要一个<table>进行处理：

<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>

Note the use of <thead>, <tbody> and <tfoot>. While not necessary, by grouping the rows into sections, we can better target just the rows in the <tbody> section and omit any rows in the header or footer.

注意使用<thead> ， <tbody>和<tfoot> 。 虽然没有必要，但通过将行分组为多个节，我们可以更好地仅将<tbody>节中的行作为目标，并省略页眉或页脚中的任何行。

Same as before, we will want to initiate a counter with a zero value:

与以前一样，我们将要初始化一个零值的计数器：

body {
  counter-reset: rows;
}

For each row <tr> in the <tbody> we shall increment the counter:

对于<tbody>中的每一行<tr> ，我们将增加计数器：

table tbody tr {
  counter-increment: rows;
}

Finally, we will add the total number of rows, the final value of the counter, to the footer in the column aptly classed as .total:

最后，我们将总行数(计数器的最终值)添加到适当归类为.total的列的页脚中：

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

Now our <table> will report on how many rows it contains. Adding or deleting rows to the markup will yield an updated total. This even works when using JavaScript to manipulate the DOM.

现在，我们的<table>将报告它包含多少行。 在标记中添加或删除行将产生更新的总数。 甚至在使用JavaScript操纵DOM时也可以使用 。

结论 (Conclusion)

Even though we’re blurring the line between content and design, counters in CSS are extremely useful and in many cases can completely eliminate the need of introducing JavaScript to a page.

即使我们模糊了内容和设计之间的界限，CSS中的计数器还是非常有用的，并且在许多情况下可以完全消除将JavaScript引入页面的需要。

Want to see the code snippets on this page in action and play around with it on your own? Check out the code from this post on CodeSandbox.

是否想实际查看此页面上的代码片段并自己使用？ 在CodeSandbox上查看这篇文章中的代码。

翻译自: https://www.digitalocean.com/community/tutorials/css-css-counters

css 实现计数器