如何使用CSS计数器自动为元素编号

CSS counters are used to add counts to elements. The count is added by providing variables that can be initialized (using counter-reset), and these variables can then be incremented by CSS rules.

CSS计数器用于向元素添加计数。 通过提供可以初始化的变量 (使用counter-reset )来添加counter-reset ，然后可以通过CSS规则增加这些变量。

Many developers overlook this powerful CSS feature, and that is why we are going to go over how to work with counters in this tutorial.

许多开发人员忽略了此强大CSS功能，这就是为什么我们将在本教程中介绍如何使用计数器。

何时使用CSS计数器 (When to Use CSS Counters)

CSS counters can be used whenever you need a counting system on your web page. Some of the best use cases are:

只要您的网页上需要计数系统，就可以使用CSS计数器。 一些最佳用例是：

• Numbering complex lists
  为复杂列表编号
• Create dynamic pagination links
  创建动态分页链接
• Numbering steps in an on-boarding system.
  入职系统中的编号步骤。

In this tutorial, we will be talking about how to use CSS counters to make complex lists and create dynamic pagination.

在本教程中，我们将讨论如何使用CSS计数器制作复杂的列表并创建动态分页 。

如何使用CSS计数器 (How to Use CSS Counters)

The CSS counting system consists of the counter-reset, counter-increment, counter() and counters() and content properties. These properties take care of everything you need to do in the CSS counting system.

CSS计数系统由counter-reset ， counter-increment ， counter()和counters()和content属性组成。 这些属性照顾您在CSS计数系统中需要做的所有事情。

Let's look more closely at these properties so we understand how they can be used.

让我们更仔细地研究这些属性，以便我们了解如何使用它们。

柜台属性说明 (Counter Properties Explained)

• counter-reset: Used to reset or initialize your counter. To use CSS counters you must first create one with this property.

  counter-reset ：用于重置或初始化计数器。 要使用CSS计数器，您必须首先使用此属性创建一个。

• counter-increment: Used to increment the variable of an already initialized counter.

  counter-increment ：用于增加已经初始化的计数器的变量。

• counter(): This function does the magic. It's used inside the content property, on a :before or :after pseudo selector, to add up the counts.

  counter() ：此函数具有魔力。 它用于content属性内部的伪选择器:before或:after ，以累加计数。

• counters(): Used for inherited counting, and generates the instance of a parent counter variable in the child.

  counters() ：用于继承计数，并在子代中生成父计数器变量的实例。

• content: Used to add up the count value (strings) by manipulating content for :before and :after css selectors.

  content ：用于通过处理CSS选择器 :before和:after内容来累加计数值 (字符串)。

Now that we understand these CSS counter properties and values, let's dive in to our examples.

现在我们了解了这些CSS计数器属性和值，让我们深入研究示例。

网页上的编号元素 (Numbering Elements on a Web page)

Numbering can be done in HTML, but CSS numbering provides dynamic and easy-to-control ways of doing the job using CSS counters. The following example will number the elements on web page with CSS.

可以使用HTML进行编号，但是CSS编号提供了使用CSS计数器来完成这项工作的动态且易于控制的方式。 以下示例将使用CSS编号网页上的元素。

First, we are going to set up some simple numbering that does just one-level numbering. Then we'll move on to a more advanced example where we'll set up a table of contents.

首先，我们将建立一些仅进行单级编号的简单编号。 然后，我们将转到一个更高级的示例，在该示例中，我们将建立目录。

简单编号 (Simple Numbering)

In this example, we'll create a simple items counter with CSS. In your HTML, just create your items structure like this:

在此示例中，我们将使用CSS创建一个简单的项目计数器。 在HTML中，只需按以下方式创建项目结构：

<div>
  <p>Mercury</p>
  <p>Venus</p>
  <p>Earth</p>
</div>

In the CSS we are going to do three key things:

在CSS中，我们将做三件事：

1. Initialize the counter on the parent div using counter-reset

   使用counter-reset在父div上初始化计数器

2. Increment the counter value by 1 on the child div p using counter-increment

   使用counter-increment在子div p上将计数器值增加1

3. Add the counter variables before the div p content using the :before pseudo selector.

   使用:before伪选择器将计数器变量添加到div p内容:before 。

Let's go!

我们走吧！

div {
  list-style-type: none;
  counter-reset: css-counter 0; /* initializes counter to 0; use -1 for zero-based numbering */
}

div p {
  counter-increment: css-counter 1; /* Increase the counter by 1. */
}

div p:before {
  content: counter(css-counter) ". "; /* Apply counter before children's content. */
}

结果 (The Result)

The above numbering was done with pure CSS. Interesting, right?

上面的编号是使用纯CSS完成的。 有趣吧？

Now we are going to implement some more complex numbering which makes CSS counters worth learning. We will be numbering nested elements with the counters() function, which can be used for inherited counting. This generates the instance of a parent counter in the child.

现在，我们将实现一些更复杂的编号，这使CSS计数器值得学习。 我们将使用counters()函数对嵌套元素进行编号，该函数可用于继承计数。 这将在子代中生成父代计数器的实例。

目录编号 (Table of Contents Numbering)

<ul>
  <li>
    Web Development
    <ul>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>CSS Introduction</li>
          <li>CSS Selectors</li>
          <li>CSS Animation</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Graphics Design</li>
  <li>Computer Education</li>
</ul>

The CSS looks like this:

CSS看起来像这样：

ul {
  list-style-type: none;
  counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */
}

ul li:before {
  counter-increment: css-counters;
  content: counters(css-counters, ".") " "; /* generates inherited counters from parents */
}

结果 (The Result)

Now you can see the power of nesting counts with counters(). This saves you the hassle of improper nesting. To help you avoid mistakes, it inherits the counter properties of the parents, and appends the child's counter to it.

现在，您可以使用counters()看到嵌套计数的功能。 这样可以省去不正确嵌套的麻烦。 为了帮助您避免错误，它继承了父母的计数器属性，并将孩子的计数器附加到它的后面。

So now that we are good with numbering elements, what next?

因此，既然我们擅长编号元素，那么下一步呢？

进行动态分页 (Making Dynamic Pagination)

Making pagination with CSS counters is quite simple. Pagination is usually done with HTML, repeating the same set of elements and changing the numbers inside to create navigation to each page of a result.

使用CSS计数器进行分页非常简单。 分页通常使用HTML进行，重复相同的元素集并更改内部数字以创建到结果每一页的导航。

A developer may choose to use something dynamic like making loops that generate the elements, or do it from the server. But today we're going to use CSS to do this dynamically!

开发人员可以选择使用动态的东西，例如制作可以生成元素的循环或从服务器执行。 但是今天，我们将使用CSS动态地执行此操作！

How? With our senior counters() function.

怎么样？ 使用我们的高级counters()函数。

The same way we have been incrementing our values for the numbering above, we can also make a dynamic pagination list with (you guessed it) CSS counters.

我们为上面的编号增加值的方式相同，我们还可以使用(您猜对了)CSS计数器制作一个动态分页列表。

Let's start:

开始吧：

<ul>
  <li class="previous">&lt;</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="next">&gt;</li>
</ul>

Note: You don't need to add numbers inside the li, and you can make as many as you want. Our CSS counters() are going to do the numbering for us.

注意：不需要在li内添加数字，并且可以根据需要添加任意数量。 我们CSS counters()将为我们编号。

The CSS looks like this:

CSS看起来像这样：

ul {
  list-style-type: none;
  counter-reset: paginate-counter 0;
}

ul li {
  border: solid 3px #ccc;
  color: #36f;
  border: 5px;
  float: left;
  margin: 5px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

/* Setting styles for the inner text */
ul li:not(.previous):not(.next):before {
  counter-increment: paginate-counter;
  content: counter(paginate-counter);
}

The Result

结果

What else can you do with counters? Let me hear your ideas.

您还可以使用柜台做什么？ 让我听听你的想法。

Thanks!

谢谢！

翻译自: https://www.freecodecamp.org/news/numbering-with-css-counters/