Deep understanding of CSS counters and deep understanding of css

Deep understanding of CSS counters and deep understanding of css
Directory [1] Create counter [2] use counter [3] Before DEMO

We are no longer familiar with counters. The list item mark in the ordered list is the counter.

 

Create a counter

There are two basic aspects for creating a counter: one is to reset the starting point of the counter, and the other is to increase it by a certain amount.

Counter-reset

Counter-reset: none; (default) counter-reset: <identifier> <integer> // <identifier> is the counter identifier, is a name set by the creator. // <integer> is a reset number.

Counter-reset: c1 4; // indicates resetting the c1 counter to 4counter-reset: c1 4 c2 0 c3-5; // indicates resetting c1 to 4, reset c2 to 0 and c3 to-5couter-reset: c1; // reset c1 to 0

[Note] If <integer> is not set, the default value is 0.

 

Counter-increment

Counter-increment: none; (default) counter-increment: <identifier> <integer> // <identifier> is the counter identifier, is the name of the creator. // <integer> is an incremental number.

Counter-increment: c1 4; // sets the increase of the c1 counter to 4 counter-reset: c1 4 c2 0 c3-5; // sets the increment of c1 to 4, set c2 to 0 and c3 to-5 couter-increment: c1; // set c1 to 1

[Note] If <integer> is not set, the default increment is 1.

 

Use counters

The content attribute and counter () function must be used in combination to use counters.

Counter () function

The counter () function accepts two parameters, which are separated by commas (,). The first parameter is the counter identifier, and the second parameter sets the counter style (which can be omitted ), the value is the same as the value of list-style-type in the list. Similarly, multiple counter () functions can be used.

Content: counter (c1, upper-roman); // counter c1 that uses uppercase letters and Rome

[The following is a detailed demonstration of the counter style]

<Demo Box> click the following attribute values for demonstration.

 

DEMO simple counter DEMO

<Demo Box> click the following attribute values for demonstration.

View code

 

Hierarchical directory demo

<Demo Box> click the following attribute values for demonstration.

<Div id = "oShow"> 
body,h2,h3,p{    margin: 0;}    #oShow{    counter-reset: c2;}#oShow h2{    counter-reset: c3 cp;    counter-increment: c2;}#oShow h3{    counter-increment: c3;        counter-reset: cp;    text-indent: 2em;}#oShow p{    counter-increment: cp;     text-indent: 4em;   }#oShow h2:before{    content: counter(c2);}#oShow h3:before{    content: counter(c2) '.' counter(c3);}#oShow p:before{    content: counter(c2) '.'  counter(c3)  '.' counter(cp);    }