随机数 | @counter-style.range (Counter Styles) - CSS 中文开发手册
定义自定义计数器样式时，range描述符允许作者指定应用样式的计数器值的范围。如果计数器值超出指定的范围，则将使用回退式样来构造该标记的表示。范围描述符的值可以是auto或逗号分隔的指定为整数的下限和上限列表。
如果值是自动的，那么对于循环，数字和固定系统，范围将从负无穷到正无穷。对于字母和符号系统，范围从1到正无穷大。对于添加剂系统，自动将导致范围从0到正无穷大。对于扩展系统，范围是自动为扩展系统生成的。
当范围指定为整数时，该值infinite可以用来表示无穷大。如果无限被指定为一个范围中的第一个值，那么它被解释为负无穷。如果作为上界使用，则视为正无穷。
| Related at-rule | @counter-style |
|---|---|
| 初始值 | auto |
| 适用媒体 | all |
| 计算值 | as specified |
| 正规顺序 | order of appearance in the formal grammar of the values |
语法
/* Keyword value */ range: auto; /* Range values */ range: 2 5; range: infinite 10; range: 6 infinite; range: infinite infinite; /* Multiple range values */ range: 2 5, 8 10; range: infinite 6, 10 infinite;
值
auto范围取决于计数器系统：
对于循环系统、数值系统和固定系统，范围为负无穷到正无穷。对于字母和符号系统，范围是1到正无穷大。对于加性系统，范围为0到正无穷大。对于扩展系统，范围是自动为扩展系统产生的范围; 如果扩展一个复杂的预定义样式（§7复杂预定义计数器样式），范围就是样式的定义范围。
[ [ | infinite ]{2} ]#定义一个以逗号分隔的范围列表。对于每个单独的范围，第一个值是下限，第二个值是上限。范围是包容性的，这意味着它总是包含下限和上限数字。如果无穷大被用作范围中的第一个值，则表示负无穷; 如果它被用作第二个值，它表示正无穷大。计数器样式的范围是列表中定义的所有范围的联合。
如果任何范围的下限高于上限，则整个描述符无效，将被忽略。
正式语法
[ [ <integer> | infinite ]{2} ]# | auto 示例
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ul>
@counter-style range-multi-example {
system: cyclic;
symbols: "A0" "A1";
range: 2 4, 7 9;
}
.list {
list-style: range-multi-example;
} 上面的列表将显示如下：
One □. Two ■. Three □. FourFiveSix■. Seven □. Eight■. NineTen
CSS 中文开发手册