参考网址:
http://www.w3cplus.com/css3/css-counters.html
http://www.webhek.com/css-counters
http://www.jiawin.com/css-counter-increment-counter-reset
/**
* ul上设置的属性:
* counter-reset:[ <identifier> <integer>? ]+ | none | inherit;//标识计数器作用域(必需且必须用于选择器,值可以自定义)
* identifier:值必需,定义计数器的名称;
* integer:设置或重置调用计算数器时起始值,可以是正数、零或负数。
* none:默认。不能对选择器的计数器进行重置。
* inherit:规定应该从父元素继承 counter-reset 属性的值。
* //display: none无法重置计数器;visibility: hidden,则可重置计数器
* //counter-reset只是定义了一个计数器标识符,但没有指定用到哪。换句话说,这个计数器标识符,可以用到任何标签元素上。
* //如果要在某个标签上使用counter-reset声明好的计数器,需要使用counter-increment来显式设置
*
* ul>li上设置的属性:
* counter-increment:[ <identifier> <integer>? ]+ | none | inherit;//标识计数器与实际相关联元素范围。
* identifier:值必需,获取counter-reset定义的标识符;
* integer:可选,指定计数起始值,可以是正数、零或负数;如果未指定任何值,则该值为1(前提是counter-reset未显式设置计数的起始值)。其值递增是按倍数值递增,如果设置了值为2,后面元素递增值为4、6、8,依此类推
* none:默认。选择器无计数器增量。
* inherit: 规定应该从父元素继承 counter-increment 属性的值。
* //每遇到一个符合条件li元素,counter-increment就会被调用一次,计数就是增加1。
* //display: none无法增加计数;visibility: hidden,则可增加计数
*
* ul>li:before上设置的属性:
* content:string|url|counter(name)|counter(name, list-style-type)|counters(name, string)|counters(name, string, list-style-type)|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote;
* //调用定义好的计数器标识符
* //counter()命令还可以接受第二个参数,两参数之间使用逗号(,)来分隔,当作同时计算多个元素时数据的分隔符
* //第一个参数是counter-increment定义的属性值<identifier>,用来告诉该文档插入的计数器标识符名称是什么。
* //第二个是用来设置计数器的风格,有点类似于list-style-type。默认情况之下取值为十制,但你也可以重置这个样式风格,比如upper-roman或者upper-alpha等。
*
* list-style-type可设置的值:(参考网址:http://www.w3school.com.cn/cssref/pr_list-style-type.asp)
* list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit;
* disc:默认,实心圆;
* circle:空心圆;
* square:实心方块;
* decimal:数字;
* decimal-leading-zero:0开头的数字,如01、02、03...;
* lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。
* upper-roman:大写罗马数字(I, II, III, IV, V, 等。
* lower-greek:小写希腊字母(alpha, beta, gamma, 等。
* lower-latin:小写拉丁字母(a, b, c, d, e, 等。
* upper-latin:大写拉丁字母(A, B, C, D, E, 等。
* lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。
* upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。
* armenian:传统的亚美尼亚编号方式
* georgian:传统的乔治亚编号方式(an, ban, gan, 等。
* none:无标记
* inherit;
*/
body{
counter-reset: TopicalTitle;
}
section{
width:100%;
color:#aca277;
font-size:4.5rem;
}
section h1{
display:inline-block;
border-bottom: 2px solid #7f632e;
position:relative;
counter-increment: TopicalTitle;
}
section h1:before{
content: counter(TopicalTitle, upper-alpha);
font-size:8.125rem;
color:#8d6c3b;
margin-right:2rem;
}