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

This article mainly shows you the "css counter how to achieve automatic nested numbering", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css counter how to achieve automatic nested numbering" this article.

Css counters use multiple counter () functions to nest numbers

The counter () function of the css counter sets the individual numbering of the element, but we can use the counter () function to set the nested number.

Let's take a look at how it is implemented, giving the html code:

Automatic nesting numbering of CSS counter

Headline

Second-level title

The content of the secondary title, the content of the secondary title, the content of the secondary title!

Headline

Second-level title

The content of the secondary title, the content of the secondary title, the content of the secondary title!

Second-level title

The content of the secondary title, the content of the secondary title, the content of the secondary title!

Effect picture:

3.jpg

Let's take a look at how css implements nested numbering.

1. Use css counter to make headlines numbered automatically.

Use the counter-reset attribute in the parent container article tag of the h3 tag to add the name "my-counter" to the css counter to initialize the counter

Then use the counter-increment attribute in the h3 tag to define the value of each increment of the counter. The default value is 1, which can be omitted.

Finally, use the: before selector and the content attribute to display the number before adding it to the h3 tag.

Article {

Counter-reset:my-counter

}

H3 {

Counter-increment:my-counter

}

H3:before {

Content:counter (my-counter) "."

}

The above is all the contents of the article "how to achieve automatic nesting numbering of css counters". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.