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

In this article, the editor introduces "how to use css counter" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use css counter" can help you solve your doubts.

What is the css counter?

Counters are a powerful tool provided by css3 and a method that allows us to use CSS to automatically number elements. Use it to easily count any element in the page and achieve a function similar to an ordered list. However, compared with ordered lists, css counters can count arbitrary elements, as well as personalized counting.

Related properties of css counters

1 、 counter-reset

The counter-reset property is used to define and initialize one or more CSS counters. It can use one or more identifiers as a value that specifies the name of the counter.

Use syntax:

Counter-reset: [?] + | none | inherit

Each counter name can be followed by an optional value that specifies the initial value of the counter.

Note:

1), the keywords none,inherit and initial cannot be used as counter names; the keyword none,inherit can be used as the value of the count counter-reset property.

Setting none unsets the counter; setting inherit inherits the counter-reset value from the parent element of the element. The default value of the counter-reset property is none.

2) the initial value of the counter is not the first number / value when the counter is displayed.

This means that if you want the counter to start at 1, you need to set the initial value in counter-reset to zero. 0 is the default initial value, so if you omit it, it will be reset to zero by default; counter-reset allows negative values. Therefore, if you want the counter to be displayed from zero, you can set its initial value to-1.

Example:

SomeSelector {

Counter-reset:counterA;/* counter counterA initial, initial value is 0 seconds /

Counter-reset:counterA6;/* counter counterA initial, initial value is 6 minutes /

Initial counterA of counter-reset:counterA4counterB;/* counter, initial value of 4, initial value of counter counterB, initial value of 0 counter /

Initial counterA of counter-reset:counterA4counterB2;/* counter, initial value of 4, initial value of counterB, initial value of 2 seconds /

}

2 、 counter-increment

The counter-increment property is used to specify the increment value of one or more CSS counters. It takes one or more identifiers as values and specifies the name of the counter to be incremented.

Use syntax:

Counter-increment: [?] + | none | inherit

Each counter name (identifier) can be followed by an optional value that specifies how much the counter needs to be incremented each time the element we number appears. The default increment is 1. Zero and negative integers are allowed. If a negative integer is specified, the counter is decremented.

The counter-increment property must be used in conjunction with the counter-reset property. Let's take a look at the example:

Article {/ * define and initialize counters * /

Counter-reset:section;/*'section' is the name of the counter * /

}

Articleh3 {/ * every time h3 appears, the counter increments by 1 percent /

Counter-increment:section;/* is equivalent to counter increment: section 1; * /

}

3. Counter () function

The counter () function must be used with the content property to display CSS counters. It takes the name of the CSS counter as a parameter and passes it to the content property as a value, while the content attribute uses the: before pseudo element to display the counter as the generated content.

Example:

H3:before {

Content:counter (section)

}

The counter () function comes in two forms: counter (name) and counter (name,style).

The name parameter is the name of the counter to display; you can specify the name of the counter using the counter-reset property.

The style parameter is used to define the style of the counter. By default, counters are formatted with decimal numbers, that is, counters generate content as numbers, but in fact, all available styles of the csslist-style-type property are also available for counters. This means that you can create decimal numeric counters, counters displayed as Roman characters, low-alphabetic characters, etc. Here are all possible counter styles:

Disc: solid circle styl

Circle: hollow circle styl

Square: solid square styl

Decimal: Arabic numeral style

Lower-roman: lowercase Roman numeral style

Upper-roman: uppercase Roman numeral style

Lower-alpha: lowercase English letter style

Upper-alpha: uppercase letter style

None: do not use bullets

Armenianl: traditional Armenian numeral style

Cjk-ideographic: a simple ideographic numeral style

Georgian: traditional George digital style

Lower-greek: basic Greek lowercase letter style

Hebrew: traditional Hebrew digital style

Hiragana: Japanese hiragana character styl

Hiragana-iroha: Japanese hiragana serial number style

Katakana: Japanese katakana character style

Katakana-iroha: Japanese katakana serial number style

Lower-latin: lowercase Latin letter style

Upper-latin: uppercase Latin letter style

The following is an example of specifying the use of lower-roman characters to display counters:

Ulli:before {

Content:counter (my-counter,lower-roman)

}

4. Counters () function

The counters () function must also be used with the content property to display CSS counters. Like the counter () function, the counters () function is passed to the content attribute as a value; then the content attribute uses the: before pseudo element to display the counter as the generated content.

The counters () function also comes in two forms: counters (name,string) and counters (name,string,style).

The name parameter is also the name of the counter to display. You can use the counter-reset property to specify the name of the counter.

The difference between the counters () function and the counter () function (singular) is that the counters () function can be used to set nested counters.

Nested counters are used to provide automatic numbering for nested elements, such as nested lists. If you want to apply a counter to a nested list, you can number the first-level items, for example, 1mem2, 3, and so on. The second level list item will be numbered 1.1, Magi 1.2, Jol 1.3, etc. The third-level project will be 1.1.1, 1.1.2, 1.1.3, 1.2.1, 1.2.2, 1.2.3 and so on.

The string parameter is used as a separator between numbers at different nesting levels. For example, in '1.1.2', a point ('.') is used to separate different level numbers. If we use this counters () function to specify a point as a delimiter, it might look like this:

Content:counters (counterName, ".

If you want nested counters to be separated by another character, for example, if you want them to appear as "1-1-2", you can use dashes instead of dots as string values:

Content:counters (counterName, "-")

Like the counter () function, the style parameter is used to define the style of the counter. By default, counters are formatted with decimal numbers. For more information about the setting of the style parameter, refer to the style parameter of the counter () function.

The following is an example that specifies that nested counters will be displayed using lower-roman characters and using dots as delimiters:

Ulli:before {

Content:counters (my-counter, ".", lower-roman)

}

An example of a css counter (counter):

Tester

Body {

Counter-reset:section

}

H2 {

Counter-reset:subsection

}

H2:before {

Counter-increment:section

Content:counter (section) "."

}

H4:before {

Counter-increment:subsection

Content:counter (section) "." counter (subsection)"

}

Css counter tutorial

Css counter

Related properties of css counters

Example illustration

Css counter tutorial

Css counter

Related properties of css counters

Example illustration

Read here, this article "how to use css counter" 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.