随机数 | @counter-style.range
定义自定义计数器样式时，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: "\25A0" "\25A1";
range: 2 4, 7 9;
}
.list {
list-style: range-multi-example;
}上面的列表将显示如下：
- One
- □. Two
- ■. Three
- □. Four
- Five
- Six
- ■. Seven
- □. Eight
- ■. Nine
- Ten
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
