Shulou(Shulou.com)06/01 Report--

This article Xiaobian for you to introduce in detail "css how to use the counter to automatically number elements", the content is detailed, the steps are clear, the details are handled properly, I hope this "css how to use the counter to automatically number elements" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

First, set and use css counters to achieve simple element numbering

To create and use CSS counters, follow these steps:

1. Set the name of the counter and reset it to the initial value we selected. This is done using the counter-reset property.

Counter-reset: identifier (name of counter) (starting value, optional, default is 0)

The initialization counter (specify the starting value) is optional, and if you do not specify an exact value, it will start from zero, and the implementation of the counter will start at'1'.

The counter-reset attribute is set on the ancestor or sibling element of the element to be numbered. For example, if you number headings in an article, you can set counters on the ancestors of those headings.

Article {

/ * set a counter named "section" and initialize it to zero /

Counter-reset:section0

}

The reason behind this is that resetting counters on numbered elements will cause elements with the same number to appear. This is because the counter is reset to its initial value and each title is incremented before it is displayed.

2. Specify when the counter is incremented and by what value.

For example, if you want the counter to be incremented every time the h3 header appears, you can specify it; this is done using the counter-increment property. We can choose to increment any value of the counter for each element to be numbered (h3 in this case). By default, the counter will be incremented by 1; we can also use negative values so that the counter will be decremented.

H3 {

/ * use the "section" counter every time h3 occurs, and increase it by 1 (default) every time it appears * /

Counter-increment:section1

}

One important thing to note here is that the counter is incremented before it is displayed, so if we want the first title to start with 1, we should set the counter's counter-reset property initial value to zero in the calculator.

3. Display counter

After setting the counter and specifying when and how much it should be incremented, we need to display the counter.

To display counters, we need to use the counter () function of the content attribute (or counters () nested counter) as the value of the:: before pseudo element.

In our example, we are numbering the h3 title, so we will display the counter before the title:

H3::before {

Content:counter (section)

}

Of course, if you want to add some spaces and any other possible delimiters between the number of the title and the title, you can do this by appending the delimiter to the counter's counter () function, using a string as the value, for example:

H3::before {

/ * add a dot after the number, followed by a space * /

Content:counter (my-counter) "."

}

Let me take a look at the example:

Html Code:

The use of css counter

The use of css counters the use of css counters

The use of css counter

The use of css counters the use of css counters

Css Code:

Body {

Counter-reset:section

}

H3:before {

Counter-increment:section

Content:counter (section) "."

}

Read here, the "css how to use counters to automatically number elements" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.