回退

基线 2023

新可用

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

@counter-style at-rule 的 **fallback** 描述符可用于指定一个备用计数器样式，如果正在定义的计数器样式无法为特定计数器值创建标记表示形式，则使用该样式。

语法

css
/* Keyword values */
fallback: lower-alpha;
fallback: custom-gangnam-style;

值

该描述符将其值作为单个 <counter-style-name>。

<counter-style-name>

提供用作备用样式的计数器样式的名称，该名称可以是自定义 CSS 计数器样式区分大小写的 <custom-ident>（不带引号），也可以是区分大小写的 list-style-type 属性值，例如 decimal、disc 等。

如果省略，则计数器备用样式默认为 decimal。

描述

当为计数器样式指定 range 描述符时，将使用作为 fallback 描述符的值提供的计数器样式；fallback 样式用于表示超出范围的所有值。当使用 fixed system 且没有足够的符号来覆盖所有列表项时，也会使用 fallback 样式；fallback 样式用于表示超出固定系统范围的所有值。在这两种情况下，以及在定义的计数器无法创建特定计数器值的其他任何时间，都会使用 fallback 样式。

如果指定的备用样式也无法构建表示形式，则使用该备用计数器的 fallback 值。如果该备用样式的备用样式也无法构建表示形式，则使用该备用样式的备用样式。这种回退将持续进行，直到找到一个能够构建计数器表示形式的备用样式。如果没有备用 fallback 值能够构建表示形式（如果备用样式没有设置 fallback 值，或者如果未指定或无效 fallback 值），则 fallback 默认为 decimal。

正式定义

相关 at-rule@counter-style
初始值decimal
计算值如指定

正式语法

fallback = 
  <counter-style-name>

示例

指定备用计数器样式

HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}

结果

规范

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅