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; 用於在瀏覽器不支援自定義附加符號時提供對十進位制編號系統的回退。

此示例用於說明處理某些瀏覽器可能缺乏對自定義計數器樣式支援的實用方法。

列印頁面