?2016-2026 Matools All rights reserved,
粵ICP備17059708號
我是小雨小雨，專注于更新有趣、實用內(nèi)容的小伙，如果內(nèi)容對大家有一點幫助，那么就請動動手指，給個關(guān)注、點贊支持一下吧。 ^ - ^
序言
前兩天接到一個需求，其中包括一個有序的列表，我們今天就來看看這個有序怎么做更方便、簡單。
當(dāng)然，這個功能很簡單：
* 可以手動寫死...
* 可以循環(huán)插入dom，用索引做前綴。原生循環(huán)或者利用框架的循環(huán)
* 也可以用三行搓手手(css)自動計數(shù)
今天主要說說如何用css來計數(shù)
原理與介紹
原理很簡單，利用偽元素的content + counter()/counters() + counter-reset +
counter-increment計數(shù)四劍客即可，但是咱們需要先了解一下這幾個屬性是什么，才能得心應(yīng)手！
* content(): 用于向偽元素中插入元素
* counter-reset: 設(shè)置命名計數(shù)器，可設(shè)置多個。格式為 (計數(shù)器名稱 初始值) (計數(shù)器名稱 初始值) ...
* counter-increment: 用于增加某個計數(shù)器的值，可指定增加的具體值，可設(shè)置多個，格式同上。
* 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定義了兩個容器，來表示嵌套，當(dāng)然我們也可以使用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">內(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()的會搜索所有的容器，然后將命名計數(shù)器收集、拼接然后展示。
上面兩個demo的區(qū)別可自行觀察，如果有問題，歡迎評論區(qū)一起討論交流.
結(jié)束是一個新的開始
這就是本次主題的全部內(nèi)容，日后會堅持至少每周一更的頻率，歡迎志同道合朋友一起討論、交流。
最后，如果本文對你有幫助，希望得到你的支持。
熱門工具 換一換