The use of CSS3 's counter

Early on, the counters only exist in elements such as Ul,ol, and how to add counts to other elements can only be achieved by list-style-image, or background-image. But now CSS3 adds the counter attribute, which can be used to count any element. However, this counter property also needs to be combined with other CSS properties to be effective.

First, the primary function of the counter-reset is to identify the scope of the counter. It can only be used on selectors, its value consists of two parts: the first part is the name of the counter, the second part is the starting value of the counter (default is 0), Counter-reset can also declare multiple counters such as:

Counter-reset:count 0/  * Identity counter count starting from 1 */COUNTER-RESET:COUNT2 2/* Identity counter Count2 starting from 3 */Counter-reset:count1 0 Count3 0 COUNT4 0/* Declares three counters, count1,count2,count3*/

　　

Counter-increment indicates the range that the counter actually uses. His value also includes two parts: the first is the name of the counter, which is the name set by Counter-reset, and the second value identifies the incremented value (default is 1), for example:

Counter-increment:count 1/* indicates each increment 1*/    

　　

The last, content and counter collocation, content is mainly with: After,: Before,::after,::before to use, counter is mainly to the value of the insertion counter of the element.

The overall example is as follows:

<dl>        <dt>example</dt>        <dd>example</dd>        <dd>example</dd>        <dd>example</dd>        <dt>example2</dt>        <dd>example2</dd>        < dd>example2</dd>        <dd>example2</dd>        <dd>example2</dd></dl>

　　

DL {Counter-reset:test1 0;} DT {counter-increment:test1; Counter-reset:test2 0;} dt:before{Content:counter (test1) ",";} dd{Counter-increment:test2;} dd:before{   Content:counter (test1) "-" Counter (test2) ",";}

As follows:

The use of CSS3 's counter