I am a light rain light rain, focused on updating interesting, useful content of guy, if you have a little help on the content, then please move a finger, give attention, support thumbs up about it. ^ - ^
Preface
Two days before receiving a demand, which includes an ordered list, we take a look at how today ordered to do more convenient and simple.
Of course, this feature is very simple:
- You can manually write the dead ...
- It can be recycled insert dom, prefixed with the index. Primary circulation loop or by frame
- Rub hands may be three lines (CSS) automatic counting
Today, the main talk about how to count using css
Principles and Introduction
The principle is very simple, using the pseudo-element content + counter () / counters () + counter-reset + counter-increment count four swordsman can, but we need to understand what these attributes are, can be handy!
- content (): for inserting elements into the dummy element
- counter-reset: setting named counter, a plurality may be provided. Format (the initial value of the counter name) (initial value counter name) ...
- counter-increment: for increasing a counter value, may specify particular value is increased, it may be provided a plurality of format supra.
- counter series (support ie8 above)
May read the definition of rigid, we can not change immediately understand how to do, so here drew a diagram:
In yards soldiers, gallop trial sword
Let's look at two examples to deepen understanding of a wave.
The first is the counter ():
<!DOCTYPE html>
<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; /* 看这 */
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
.child{
counter-reset: grandson-number; /* 看这 */
box-sizing: border-box;
border: 1px solid blue;
margin: 5px;
}
.child:before{
content: counter(child-number); /* 看这 */
counter-increment: child-number; /* 看这 */
}
.grandSon{
box-sizing: border-box;
border: 1px solid red;
margin: 5px;
}
.grandSon:before{
content: counter(grandson-number); /* 看这 */
counter-increment: grandson-number; /* 看这 */
}
</style>
</head>
<body>
<div class="parent">父亲 <!-- 容器 -->
<div class="child">儿子</div>
<div class="child">儿子</div>
<div class="child">儿子</div>
<div class="child">儿子 <!-- 嵌套容器 -->
<div class="grandSon">孙子</div>
<div class="grandSon">孙子</div>
<div class="grandSon">孙子</div>
</div>
</div>
</body>
</html>
The above example is a list of nested indexed, we used two counter-reset defines two containers nested represented, of course, we can use counters () simplifies this operation.
Look at counters ():
<!DOCTYPE html>
<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; /* 看这 */
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
margin: 5px;
}
.box:before {
content: counters(box-number, '.'); /* 看这 */
counter-increment: box-number; /* 看这 */
}
.box {
box-sizing: border-box;
border: 1px solid red;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">容器
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容
<div class="container">容器
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
</div>
</div>
</div>
</body>
</html>
conters () will search all of the container, and then name the counter collection, stitching and show.
The difference between the above two demo of self-observation, if there are problems, welcomed the comments section to discuss the exchange.
The end is a new beginning
That's all for this topic, the future will insist on at least weekly and more frequency, welcome like-minded friends together to discuss and exchange.
Finally, if you have the help of this article, I hope to get your support.
