css 实现计数器_CSS中的计数器

css 实现计数器

CSS计数器 (CSS Counters)

Counters in CSS can be defined as variables maintained by CSS and the values of those variables can be incremented by CSS rules to track the number of times they have been used.

CSS中的计数器可以定义为CSS维护的变量,并且CSS规则可以将这些变量的值递增以跟踪其使用次数。

Example Counters in CSS can be used to increment the number of paragraphs automatically.

CSS中的示例计数器可用于自动增加段落数。

CSS计数器属性 (CSS counter properties)

Following are the counter properties,

以下是计数器属性,

  1. counter-reset

    重置

  2. counter-increment

    反增量

  3. content

    内容

  4. counter() / counters() functions

    counter()/ counters()函数

Let's look at each property more closely,

让我们更仔细地研究每个属性,

1)重置属性 (1) counter-reset property)

This property is used to create or reset a counter.

此属性用于创建或重置计数器

To use CSS counter property firstly it must be created with the counter-reset property and the first step is resetting the counter.

要首先使用CSS计数器属性,必须使用counter-reset属性创建它,第一步是重置计数器。

Syntax:

句法:

Element {
    counter-reset: section;
}

Example:

例:


<html>

<head>
    <style>
        body {
            counter-reset: section;
        }
        
        h2::before {
            counter-increment: section;
            content: "Section " counter(section) ": ";
        }
    style>
head>

<body>
    <h1>Counters in CSSh1>
    <h2>counter1h2>
    <h2>counter2h2>
    <h2>counter3h2>
body>

html>

Output

输出量

css 实现计数器_CSS中的计数器_第1张图片

In the above example, the number of times a h2 tag is used is 3.

在上面的示例中,使用h2标签的次数为3。

2)反增量属性 (2) counter-increment property )

This property is used to increment the value of the counter.

此属性用于增加计数器的值。

Syntax:

句法:

Element {
    counter-increment: section;
}

Example:

例:


<html>

<head>
    <style>
        body {
            counter-reset: heading;
        }
        
        h2::before {
            counter-increment: heading;
            content: "Section " counter(heading) ": ";
        }
    style>
head>

<body>
    <h1>Counters in CSSh1>
    <h2>counter 1 incrementh2>
    <h2>counter 2 incrementh2>
    <h2>counter 3 incrementh2>
body>

html>

Output

输出量

css 实现计数器_CSS中的计数器_第2张图片

In the above example, we are incrementing the content of the heading.

在上面的示例中,我们将增加标题的内容。

3)内容属性 (3) content property)

This property is used to insert the generated content.

此属性用于插入生成的内容。

Syntax:

句法:

Element{
	content:counter(section);
}

Example:

例:


<html>

<head>
    <style>
        body {
            counter-reset: heading;
        }
        
        h2::before {
            counter-increment: heading;
            content: "Section " counter(heading) ": ";
        }
    style>
head>

<body>
    <h1>Counters in CSSh1>
    <h2>counter 1 incrementh2>
    <h2>counter 2 incrementh2>
    <h2>counter 3 incrementh2>

body>

html>

Output

输出量

css 实现计数器_CSS中的计数器_第3张图片

In the above example, the "section" and ":" are the part of the content which are used before the h2 tag content.

在上面的示例中, “ section”“:”是内容的一部分,在h2标签内容之前使用。

4)counter()/ counters()函数 (4) counter() / counters() functions)

The counter() function or the counters() function in content is used to display the content in a particular order. These two functions are basically used to add the value of a counter to the element.

内容中的counter()函数或counters()函数用于按特定顺序显示内容。 基本上,这两个函数用于将计数器的值添加到元素。

Syntax:

句法:

Element {
    counter(section);
}

Example:

例:


<html>

<head>
    <style>
        body {
            counter-reset: heading;
        }
        
        h2::before {
            counter-increment: heading;
            content: "Section " counter(heading) ": ";
        }
    style>
head>

<body>
    <h1>Counters in CSSh1>
    <h2>counter 1 incrementh2>
    <h2>counter 2 incrementh2>
    <h2>counter 3 incrementh2>
body>

html>

Output

输出量

css 实现计数器_CSS中的计数器_第4张图片

In the above example, the counter() function is used to display the heading content.

在上面的示例中, counter()函数用于显示标题内容。

翻译自: https://www.includehelp.com/code-snippets/counters-in-css.aspx

css 实现计数器

你可能感兴趣的:(css 实现计数器_CSS中的计数器)