range

Baseline 2023

新推出

自 2023 年 9 月起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

range 描述符允许作者在定义自定义计数器样式时使用 @counter-style 规则指定一个或多个计数器值范围，以应用特定样式。当包含 range 描述符时，定义的计数器将只用于指定范围内的值。如果计数器值超出指定范围，将使用备用样式来构建该标记的表示。

语法

css

/* 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。

auto

计数器 system 可表示的整个数字集合。这些范围值取决于计数器系统。

对于 cyclic、numeric 和 fixed 系统，范围是从负 infinity 到正 infinity。
对于 alphabetic 和 symbolic 系统，范围是从 1 到正 infinity。
对于 additive 系统，范围是从 0 到正 infinity。
当使用 extend 扩展一个系统时，范围是 auto 会为被扩展的系统生成的值，包括复杂预定义样式（例如一些日文、韩文、中文和埃塞俄比亚计数器样式）的扩展。

[ [ <integer> | infinite ]{2} ]#

逗号分隔的范围列表中的每个范围都包含两个值，每个值要么是 <integer>，要么是关键字 infinite。如果 infinite 用作范围中的第一个值，则表示负无穷大；如果用作第二个值，则表示正无穷大。每个范围的第一个值是该范围的下限，第二个值是上限（包含）。如果列表中任何范围的下限高于上限，则整个 range 描述符无效并将被忽略。

描述

range 描述符的值可以是 auto，也可以是使用负整数或正整数，或者关键字 infinite 指定的逗号分隔的下限和上限范围列表。

当值设置为 auto 时，范围是计数器系统的默认范围。如果 system 是 cyclic、numeric 或 fixed，范围将从负无穷大到正无穷大。如果 system 是 alphabetic 或 symbolic，范围将从 1 到正 infinity。对于 system: additive，auto 会导致范围为 0 到正 infinity。

当扩展计数器时，如果 range 设置为 auto，则范围值将是被扩展的计数器系统的 system 的范围，而不是该计数器（如果存在）的 range 值。例如，如果计数器“B”设置了 system: extends A，而计数器“A”是一个 alphabetic 计数器，则在“B”上设置 range: auto 会将“B”的范围设置为从 1 到 infinity。这是 alphabetic 系统的范围，不一定是“A”计数器样式定义中设置的范围。当“B”上设置 range: auto 时，range 被设置为 alphabetic 系统的默认范围，而不是计数器 A 的描述符列表中设置的 range 值。

相关的 at-rule	`@counter-style`
初始值	`auto`
计算值	同指定值

正式语法

range = 
  [ [ <integer> | infinite ]{2} ]#  |
  auto

示例

在给定范围内设置计数器样式

HTML

html

<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>

CSS

css

@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}

.list {
  list-style: range-multi-example;
}