This is the 27th day of my participation in the August More Text Challenge

Creation is not easy, click a “like” and then watch!

Follow the column to get you into the depths of the CSS world

preface

I don’t know how many people have created their own blog, when generating the article directory, if anyone looks like this:

What are the most common implementations of titles with numbers in front of them? I started with numbers as I walked through, but there’s a lot of JS code. It’s tricky to determine the number of levels. Until I found the counter property of pure CSS!

counter

CSS counters display counters by applying the counter() or counters() function to the content. Where counter is operated by counter-reset and counter-increment.

counter-increment

grammar

Counter -increment: counter name numeric value Optional value;

Numeric value: The default is the initial value (when you do not use counter-reset) and represents the step size.

Optional value: None.

Multiple counters can be defined.

Individual counter

 p{
  counter-increment: myCounter 1;
}
p::before{
  content: counter(myCounter);
}
Copy the code

Multiple counter

p{
  counter-increment: myCounter 1 mycount2 2;
}
Copy the code

Of course the pattern is strange. You can modify p::before. Like this:

It only adds up if it’s in the same parent

p {
    counter-increment: myCounter 1 mycount2 2;
  }
<div>
  <p>span1</p>
  <p>span1</p>
</div>
<div>
  <p>span21</p>
  <p>span21</p>
</div>
Copy the code

As shown: the P tag belongs to both div tags, and the count starts again.

counter-reset

Reset the counter.

Syntax: counter-reset: the name of the counter and the numeric value;

Counter names must be the same as those defined by counter-increment.

Numeric value: initial value reset. 1, Counter increment = 0 2, counter increment = 0The initial value of the counter is reset +increment. , the step size is still the numeric value of increment.

The same reset can reset multiple counters at the same time.

Resetting a single counter

body {
  counter-reset: myCounter 2;
}
p {
  counter-increment: myCounter 2;
}
Copy the code

Here we reset the counter in body and define the step size of the counter in p.

The net effect is that the initial value is 2+2 and the step size is 2

It has to be before counterincrement.

What does that mean?

span { counter-reset: myCounter 2; } p { counter-increment: myCounter 2; } <div> <p> SPAN1 <span> in p </span></p> </div>Copy the code

As you can see from this image, the span tag is inside the P. If we put reset on the span, reset will not work.

Do not use the same label as RESET and increment

For example, if I write this, what will happen? You can think about it. Right

p {
  counter-increment: myCounter 2;
  counter-reset: myCounter 2;
}
Copy the code

It turns out that each span is 4, because the counter is reset to 2 for each p generated.

Therefore, the author suggests:

Reset is placed on the parent element increment is placed on the current element

Reset in the current element increment in the :before or :after element.

counter

Use the counter and define the counter style for the counter. Syntax: counter(counter name, counter style)

Counter styles such as;

Upper-roman: I, II, III, IV, V…

Lower Greek: α, β, γ…

Lower-alpha: A, B, C… z

You can check out the following link: developer.mozilla.org/zh-CN/docs/…

Of course you can customize it using @counter-style.

For example,

 p::before {
content: counter(myCounter,armenian) ' ' ' ';
}
Copy the code

counters()

The difference between counters and counter is an S, which means that the counters are for nested counting. Grammar:

Counters (counter names, nested styles, counters)

Remember this picture, so let’s implement it.

First of all, there are two layers, each of which starts at 1.

ol{ counter-reset: myCounter 0; list-style-type: none; } li::before { counter-increment: myCounter 1; content: counters(myCounter,'.') ' '' '; } < ol > < li > what is counter < / li > < li > counter use step < ol style = "padding - left: 20 px" > < li > introduction < / li > < li > write < / li > < / ol > < / li > < / ol >Copy the code

Here we use OL and Li. First, we reset on OL, so the counter will be reset every time we encounter OL, ensuring that each layer starts from 1. Counters (myCounter,’.’) define the use of. For nesting.