CSS @counter-style - 範圍

在建立自定義計數器樣式時，range 描述符允許作者定義將應用樣式的特定計數器值範圍。

如果計數器值超出此定義的範圍，則使用回退樣式來建立標記表示。

允許的範圍取決於計數器系統。

可能的值

auto

對於迴圈、數字和固定系統，範圍是從負無窮大到正無窮大。
對於字母和符號系統，範圍是 1 到正無窮大。
對於累加系統，範圍是從 0 到正無窮大。
對於extends 系統，範圍是auto生成的任何值。

[ [ | 無窮大 ]{2} ]#

範圍列表（包含）包含上下限數字。
範圍中的無窮大表示負無窮大（如果為第一個）或正無窮大（如果為第二個）。
範圍是包含性的，包含上下限數字。
如果下限高於上限，則描述符無效。

語法

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

CSS 範圍 - 基本示例

以下示例演示了在 @counter-style 中使用range。

<html>
<head>
<style>
  @counter-style list-counter {
    system: cyclic;
    symbols: "*" "@";
    range: 2 5, 7 8;
   }
   ol {
    list-style: list-counter;
    color: blue;
    font-size: 20px;
   }
</style>
</head>
<body>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ol>
</body>
</html>

在上面的示例中，第一個範圍是範圍列表，包括 2、3、4 和 5。第二個包括 7、8。範圍是這兩個範圍的並集，即 2、3、4、5、7 和 8。

列印頁面