随机数 | @counter-style.range

定义自定义计数器样式时，range描述符允许作者指定应用样式的计数器值的范围。如果计数器值超出指定的范围，则将使用回退式样来构造该标记的表示。范围描述符的值可以是auto或逗号分隔的指定为整数的下限和上限列表。

如果值是自动的，那么对于循环，数字和固定系统，范围将从负无穷到正无穷。对于字母和符号系统，范围从1到正无穷大。对于添加剂系统，自动将导致范围从0到正无穷大。对于扩展系统，范围是自动为扩展系统生成的。

当范围指定为整数时，该值infinite可以用来表示无穷大。如果无限被指定为一个范围中的第一个值，那么它被解释为负无穷。如果作为上界使用，则视为正无穷。

语法

/* 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;    
}

上面的列表将显示如下：

1. One
2. □. Two
3. ■. Three
4. □. Four
5. Five
6. Six
7. ■. Seven
8. □. Eight
9. ■. Nine
10. Ten