写法

/* Simple usage */
counter(countername);

/* changing the counter display */
counter(countername, upper-roman)

一般搭配伪元素使用，::before 和 ::after 的content赋值

示例

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
               counter(listCounter, upper-roman) "]";
}

结果

语法解析

counter(listCounter, upper-roman)

counter( <custom-ident>, <counter-style>? )

custom-ident(listCounter)

counter名称与counter-reset和counter-increment定义的名称一致，不能以双破折号开头

counter-style (upper-roman)

counter-style是counter表现形式，可以是数字、字母或符号。值支持的类型 <list-style-type>

counter-reset 语法

/* Set "my-counter" to 0 */
counter-reset: my-counter;

/* Set "my-counter" to -1 */
counter-reset: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-reset: counter1 1 counter2 4;

/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

counter-increment语法

/* Increment "my-counter" by 1 */
counter-increment: my-counter;

/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;

/* Increment "counter1" by 1, and decrement "counter2" by 4 */
counter-increment: counter1 counter2 -4;

/* Do not increment/decrement anything: used to override less specific rules */
counter-increment: none;

/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;