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