@counter-style

system

用于定义如何给list编号。

system: cyclic;

列表循环模式。

<style>

@counter-style fisheye {

    system: cyclic;

    symbols: ◉;

    suffix: " ";

}

ul {

    list-style: fisheye;

}

</style>


<ul>

    <li>One</li>

    <li>Two</li>

    <li>Three</li>

    <li>Four</li>

    <li>Five</li>

</ul>

显示为：

◉ One

◉ Two

◉ Three

system: fixed;system: fixed 3;

首先显示定义的symbol，然后显示数字，数字第一个值取1，也可以在fixed后面定义

@counter-style circled-digits { system: fixed 2; symbols: ➀ ➁ ➂; suffix: ' '; }

显示为：

➀ One

➁ Two

➂ Three

4 Four

5 Five

system: symbolic;

符号列表循环，每循环一次符号增加一个

@counter-style abc { system: symbolic; symbols: a b c; suffix: ". "; }

显示为  

   a. One

   b. Two

   c. Three

 aa. Four

 bb. Five

 cc. Six

aaa. Seven

bbb. Eight

system: alphabetic;

就像数字一样：1，2，3，11，12，13...

@counter-style abc { system: alphabetic; symbols: a b c; suffix: ". "; }

显示为：

  a. One

  b. Two

  c. Three

aa. Four

ab. Five

ac. Six

ba. Seven

bb. Seven

system: numeric;

跟alphabetic system一样，除了从第二个symbol开始

@counter-style abc { system: numeric; symbols: a b c; suffix: ". "; }

显示为：

  b. One

  c. Two

ba. Three

bb. Four

bc. Five

ca. Six

cb. Seven

cc. Eight

@counter-style numbers { system: numeric; symbols: 0 1 2 3 4 5 6 7 8 9; suffix: ": "; }

显示为：

  1: One

  2: Two

  3: Three

  4: Four

  5: Five

  6: Six

  7: Seven

  8: Eight

  9: Nine

10: Ten

system: additive;

没看明白怎么转成罗马数字的

@counter-style upper-roman { system: additive; range: 1 3999; additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I; }

 

 

system: extends decimal;

 extends along with a @counter-style name.和list-style的默认名字

@counter-style alpha-modified { system: extends lower-alpha; prefix: "("; suffix: ") "; }

这个CSS at-rule大部分浏览器不支持，没有动力去研究了，先这样。