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。

打印页面