I’m Xiaoyu Xiaoyu, a guy who focuses on updating interesting and practical content. If the content is helpful to you, please move your finger and give your attention and support. ^ – ^

The preface

Two days ago I received a demand, including an ordered list, we will see how to do this order more convenient and simple today. Of course, this feature is simple:

  • You can write to death manually…
  • You can loop in the DOM, prefixed with an index. Native loops or loops that utilize frameworks
  • It can also be counted automatically with three lines of rubbing hands (CSS)

Today I’m going to talk about how to count with CSS

Principle and Introduction

Counter ()/counters() + counter() + counter reset + counter increment ()

  1. Content (): Used to insert elements into pseudo-elements
  2. Counter-reset: Sets named counters. Multiple counters can be set. The format is (counter name initial value) (counter name initial value)…
  3. Counter-increment: Increments the value of a counter. The value can be specified or multiple counter increments can be set in the same format as above.
  4. Counter Series (support IE8 and above)
    describe Parameter 1 Parameter 2 Parameter 3
    counter() returnNamed counterThe current value of thecontent()Together with Named counters defined Display style of named counters, for example: Arabic numerals1I’ll change it to Roman numeralsⅠ There is no
    counters() An updated version of Counter () supports nesting Named counters defined Named counter concatenation character Display style of named counters, for example: Arabic numerals1I’ll change it to Roman numeralsⅠ

After reading the rigid definition, I might not immediately understand how to do it, so I drew a picture here:

Take the yard as the soldier, and try the sword

Let’s look at two examples to deepen our understanding.

The first is the counter () :

      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .parent{
            counter-reset: child-number; / * this * /
            box-sizing: border-box;
            border: 1px solid black;
            padding: 10px;
        }
        .child{
            counter-reset: grandson-number; / * this * /
            box-sizing: border-box;
            border: 1px solid blue;
            margin: 5px;
        }
        .child:before{
            content: counter(child-number); / * this * /
            counter-increment: child-number; / * this * /
        }
        .grandSon{
            box-sizing: border-box;
            border: 1px solid red;
            margin: 5px;
        }
        .grandSon:before{
            content: counter(grandson-number); / * this * /
            counter-increment: grandson-number; / * this * /
        }
    </style>
</head>
<body>
    <div class="parent">father<! -- -- -- > container
        <div class="child">son</div>
        <div class="child">son</div>
        <div class="child">son</div>
        <div class="child">son<! -- Nested container -->
            <div class="grandSon">grandson</div>
            <div class="grandSon">grandson</div>
            <div class="grandSon">grandson</div>
        </div>
    </div>
</body>
</html>
Copy the code

In the example above of a nested indexed list, we use two counter-reset to define two containers to represent the nesting, although counters() can also be used to simplify the operation.

Look again at counters () :

      
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Document</title>
        <style>
            .container {
                counter-reset: box-number; / * this * /
                box-sizing: border-box;
                border: 1px solid black;
                padding: 10px;
                margin: 5px;
            }
            .box:before {
                content: counters(box-number, '. '); / * this * /
                counter-increment: box-number; / * this * /
            }
            .box {
                box-sizing: border-box;
                border: 1px solid red;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container">The container<div class="box">content</div>
            <div class="box">content</div>
            <div class="box">content</div>
            <div class="box">content<div class="container">The container<div class="box">content</div>
                    <div class="box">content</div>
                    <div class="box">content</div>
                </div>
            </div>
        </div>
    </body>
</html>
Copy the code

Conters () searches all containers and collects, concatenates, and displays named counters.

The differences between the above two demos can be observed by yourself. If you have any questions, please feel free to discuss them in the comments section.

The end is a new beginning

This is all the content of this topic, we will insist on more frequency at least every Monday in the future, welcome like-minded friends to discuss and communicate together. Finally, if this article is helpful to you, I hope to get your support.