CSS3 计数器(以ul>li为例)

参考网址:
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;
}