一个很有用的css技能简析
40行代码手撸一个静态文档生成器[译]
我是细雨细雨，专注于更新风趣、有用内容的小伙，假如内容对人人有一点协助，那末就请动动手指，给个关注、点赞支撑一下吧。 ^ - ^
序文
前两天接到一个需求，个中包含一个有序的列表，我们本日就来看看这个有序怎么做更轻易、简朴。
固然，这个功用很简朴：
- 能够手动写死...
- 能够轮回插进去dom，用索引做前缀。原生轮回或许应用框架的轮回
- 也能够用三行搓手手(css)自动计数
本日重要说说如何用css来计数
道理与引见
道理很简朴，应用伪元素的content + counter()/counters() + counter-reset + counter-increment计数四剑客即可，然则我们须要先相识一下这几个属性是什么，才随心所欲！
- content(): 用于向伪元素中插进去元素
- counter-reset: 设置定名计数器，可设置多个。花样为 (计数器称号 初始值) (计数器称号 初始值) ...
- counter-increment: 用于增添某个计数器的值，可指定增添的详细值，可设置多个，花样同上。
- counter系列(支撑ie8以上)
大概看完枯燥的定义，还不能立马明白改如何做，所以这边画了个图：
以码为兵，驰马试剑
我们看两个示例，加深一波明白。
首先是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>
上面的例子是一个嵌套的带索引的列表，我们运用了两个counter-reset定义了两个容器，来示意嵌套，固然我们也能够运用counters()简化这个操纵。
再看看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()的会搜刮一切的容器，然后将定名计数器网络、拼接然后展现。
上面两个demo的区分可自行视察，假如有问题，迎接批评区一同议论交换.
完毕是一个新的入手下手
这就是本次主题的全部内容，日后会对峙最少每周一更的频次，迎接同舟共济朋侪一同议论、交换。
末了，假如本文对你有协助，愿望获得你的支撑。
Redis(2)——跳跃表
声明：
1：本站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
2：本站提供的活动资源均来自互联网整理编辑，此类文章仅提供分享交流，不为其版权负责。如果您发现网站上有侵犯您（或贵司）的知识产权的作品，请来信: admin#ziyuanbo.com(#代表@)告知，本站将及时修改或删除。
3：本站所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性。本网站一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。
