我是小雨小雨蘸炸，專注于更新有趣、實(shí)用內(nèi)容的小伙尖奔，如果內(nèi)容對(duì)大家有一點(diǎn)幫助搭儒，那么就請(qǐng)動(dòng)動(dòng)手指穷当，給個(gè)關(guān)注、點(diǎn)贊支持一下吧淹禾。 ^ - ^
序言
前兩天接到一個(gè)需求馁菜，其中包括一個(gè)有序的列表，我們今天就來(lái)看看這個(gè)有序怎么做更方便铃岔、簡(jiǎn)單汪疮。
當(dāng)然，這個(gè)功能很簡(jiǎn)單：
- 可以手動(dòng)寫(xiě)死...
- 可以循環(huán)插入dom德撬，用索引做前綴铲咨。原生循環(huán)或者利用框架的循環(huán)
- 也可以用三行搓手手(css)自動(dòng)計(jì)數(shù)
今天主要說(shuō)說(shuō)如何用css來(lái)計(jì)數(shù)
原理與介紹
原理很簡(jiǎn)單，利用偽元素的content + counter()/counters() + counter-reset + counter-increment計(jì)數(shù)四劍客即可蜓洪，但是咱們需要先了解一下這幾個(gè)屬性是什么，才能得心應(yīng)手坯苹！
- content(): 用于向偽元素中插入元素
- counter-reset: 設(shè)置命名計(jì)數(shù)器隆檀，可設(shè)置多個(gè)。格式為 (計(jì)數(shù)器名稱 初始值) (計(jì)數(shù)器名稱 初始值) ...
- counter-increment: 用于增加某個(gè)計(jì)數(shù)器的值粹湃，可指定增加的具體值恐仑，可設(shè)置多個(gè)，格式同上为鳄。
- counter系列(支持ie8以上)
描述 參數(shù)1 參數(shù)2 參數(shù)3 counter() 返回 命名計(jì)數(shù)器的當(dāng)前值裳仆，一般與偽元素的content()配合使用定義的命名計(jì)數(shù)器 命名計(jì)數(shù)器的顯示樣式，例：阿拉伯?dāng)?shù)字 1改成羅馬數(shù)字Ⅰ無(wú) counters() 升級(jí)版的counter()孤钦，支持嵌套 定義的命名計(jì)數(shù)器 命名計(jì)數(shù)器連接字符 命名計(jì)數(shù)器的顯示樣式歧斟，例：阿拉伯?dāng)?shù)字 1改成羅馬數(shù)字Ⅰ
可能看完死板的定義，還不能立馬理解改如何做偏形，所以這邊畫(huà)了個(gè)圖：
以碼為兵静袖，馳馬試劍
咱們看兩個(gè)示例，加深一波理解俊扭。
首先是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>
上面的例子是一個(gè)嵌套的帶索引的列表队橙，我們使用了兩個(gè)counter-reset定義了兩個(gè)容器，來(lái)表示嵌套萨惑，當(dāng)然我們也可以使用counters()簡(jiǎn)化這個(gè)操作捐康。
再看看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">內(nèi)容</div>
<div class="box">內(nèi)容</div>
<div class="box">內(nèi)容</div>
<div class="box">內(nèi)容
<div class="container">容器
<div class="box">內(nèi)容</div>
<div class="box">內(nèi)容</div>
<div class="box">內(nèi)容</div>
</div>
</div>
</div>
</body>
</html>
conters()的會(huì)搜索所有的容器，然后將命名計(jì)數(shù)器收集庸蔼、拼接然后展示解总。
上面兩個(gè)demo的區(qū)別可自行觀察，如果有問(wèn)題朱嘴，歡迎評(píng)論區(qū)一起討論交流.
結(jié)束是一個(gè)新的開(kāi)始
這就是本次主題的全部?jī)?nèi)容倾鲫，日后會(huì)堅(jiān)持至少每周一更的頻率粗合，歡迎志同道合朋友一起討論、交流乌昔。
最后隙疚，如果本文對(duì)你有幫助，希望得到你的支持磕道。
