原文: http://www.w3cplus.com/css3/css-counters.html © w3cplus.com
counter-reset:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。
counter-increment:用来标识计数器与实际相关联的范围。
content:用来生成内容,其为:before、:after或::before、::after的一个属性。在生成计数器内容,主要配合counter()一起使用。
counter():该函数用来设置插入计数器的值。
:before、:after或::before、::after:配合content用来生成计数器内容。
mdn的例子:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>counters()函数_CSS参考手册_web前端开发参考手册系列</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>