CSS @counter-style - 回退样式

fallback 描述符允许您定义一个计数器样式，如果当前计数器样式无法为特定计数器值生成标记表示，则将使用该样式。

如果提供的计数器样式无法生成表示，则会回退到其自身的回退样式，如果没有指定，则默认为十进制样式。

回退样式用于以下情况

对于具有范围描述符的计数器样式：如果值超出指定范围，则使用回退样式。
在符号不足的固定系统中：当没有足够的符号来覆盖所有列表项时，回退样式将应用于其余项。

语法

fallback = <counter-style-name>

CSS 回退 - 基本示例

以下示例演示了指定fallback 计数器样式。

<html>
<head>
<style>
   @counter-style unit-counter {
      symbols: "I" "V" "X" "L" "C" "D" "M";
      additive-symbols: 1 5 10 50 100 500 1000;
      fallback: decimal;
   }
   ol {
   list-style: unit-counter;
      color: red;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
	<ol>
		<li>Head 1</li>
		<li>Head 2</li>
		<li>Head 3</li>
		<li>Head 4</li>
		<li>Head 5</li>
		<li>Head 6</li>
		<li>Head 7</li>
		<li>Head 8</li>
	</ol>
</body>
</html>

在此示例中，fallback: decimal; 用于在浏览器不支持自定义附加符号时提供对十进制编号系统的回退。

此示例用于说明处理某些浏览器可能缺乏对自定义计数器样式支持的实用方法。

打印页面