如何使用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中，我们将做三件事：

Initialize the counter on the parent div using
counter-reset

使用
counter-reset
在父div上初始化计数器
Increment the counter value by 1 on the child
div p
using
counter-increment

使用
counter-increment
在子
div p
上将计数器值增加1
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/

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

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

柜台属性说明 ( Counter Properties Explained )

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

简单编号 ( Simple Numbering )

结果 ( The Result )

目录编号 ( Table of Contents Numbering )

结果 ( The Result )

进行动态分页 ( Making Dynamic Pagination )

你可能也喜欢

何时使用CSS计数器

(

When to Use CSS Counters

)

如何使用CSS计数器

(

How to Use CSS Counters

)

柜台属性说明

(

Counter Properties Explained

)

网页上的编号元素

(

Numbering Elements on a Web page

)

简单编号

(

Simple Numbering

)

结果

(

The Result

)

目录编号

(

Table of Contents Numbering

)

结果

(

The Result

)

进行动态分页

(

Making Dynamic Pagination

)