CSS Counter计数器的详解
div>h2{
counter-increment:one; /*将计数器命名为one*/
counter-reset:two; /*将two计数器重置归零*/
}
div>div{
counter-increment:two;
}
div>h2:before{
content:counter(one,georgian) '.'; /*这里调用计数器one, 显示样式是georgian*/
font-size:20pt;
font-weight:bold;
}
div>div:before{
content:'第' counter(two) '本.';
font-size:13pt;
font-weight:bold;
}
<html>
<body>
<div>
<h2>系列一</h2>
<div> java语言使用教程</div>
<div>C++语言程序设计</div>
<div>css网站布局</div>
<h2>系列二</h2>
<div>四级词汇</div>
<div>大学专业英语</div>
<div>易考范文背诵</div>
</div>
</body>
</html>
counter(name) 或counter(name, style)
这里对 style样式介绍一下:
disc :实心圆点;
circle:空心圆点;
square:实心方块;
decimal:阿拉伯数字;
lower-roman:
i, ii, iii, iv, v…upper-roman
.:I, II, III, IV, V…lower-greek:
α, β, γ…upper-latin:
A, B, C, … Zsimp-chinese-formal:
壹,贰,叁...cjk-ideographic:一,二,三...
更多样式:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type