原文: http://www.w3cplus.com/css3/css-counters.html ? w3cplus.com
counter-reset:此值是必需的调榄。必須用于選擇器思劳,主要用來(lái)標(biāo)識(shí)該作用域晨抡,其值可以自定義项滑。
counter-increment:用來(lái)標(biāo)識(shí)計(jì)數(shù)器與實(shí)際相關(guān)聯(lián)的范圍。
content:用來(lái)生成內(nèi)容,其為:before、:after或::before悟衩、::after的一個(gè)屬性。在生成計(jì)數(shù)器內(nèi)容栓拜,主要配合counter()一起使用座泳。
counter():該函數(shù)用來(lái)設(shè)置插入計(jì)數(shù)器的值惠昔。
:before、:after或::before挑势、::after:配合content用來(lái)生成計(jì)數(shù)器內(nèi)容镇防。
mdn的例子:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>counters()函數(shù)_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
ol {
margin: 0;
padding: 0 0 0 2em;
list-style: none;
counter-reset: item;
}
li:before {
counter-increment: item;
content: counters(item, ".");
color: #f00;
}
</style>
</head>
<body>
<ol class="test">
<li>Node
<ol>
<li>Node
<ol>
<li>Node</li>
<li>Node</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
<li>Node</li>
</ol>
</body>
</html>