范围

基线 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 到 positive infinity。
  • 当使用 extend 来扩展一个系统时，范围是扩展系统会产生的任何 auto，包括复杂预定义样式的扩展，例如一些日语、韩语、中文和埃塞俄比亚计数器样式。
[ [ <integer> | infinite ]{2} ]#

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

描述

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

了解 auto

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

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

infinite 解释

当范围指定为整数（与 auto 相反）时，可以使用值 infinite 表示无穷大。如果 infinite 指定为范围中的第一个值，则将其解释为负无穷大。如果用作上限，即范围对中的第二个值，则将其视为正无穷大。

范围列表

range 的值是 auto（如上所述），或者是一个或多个范围的逗号分隔列表。计数器样式的范围是列表中定义的所有范围的并集。

范围列表中的每个范围都取两个值。这些值要么是 <integer>，要么是关键字 infinite。第一个值是下限，包含在内。第二个值是上限，包含在内。对于两个整数值，较低的值必须放在前面。如果列表中任何范围的下限高于上限，则整个 range 描述符无效并将被忽略。关键字 infinite 不会使范围无效，因为 infinite 的位置决定了它的值；分别是负无穷大或正无穷大，取决于它是否为下限或上限。

正式定义

相关 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;
}

结果

第一个范围是范围列表，包括 2、3 和 4。第二个包括 7、8 和 9。范围是这两个范围的并集，即 2、3、4、7、8 和 9。

规范

规范
CSS 计数器样式级别 3
# counter-style-range

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅