CSS @counter-style - 加性符號

描述符 **additive-symbols** 允許在系統描述符 **@counter-style** 設定為 **additive** 時定義符號。

它概述了由符號和非負整數權重組成的加性元組。
此係統用於建立帶符號的編號方案，例如羅馬數字。
如果系統描述符設定為 **cyclic**、**numeric**、**alphabetic**、**symbolic** 或 **fixed**，請使用 **symbols()** 描述符代替 **additive-symbols**。

語法

additive-symbols = [ <integer [0,∞]> && <symbol> ]#

CSS additive-symbols - 基本示例

以下示例演示了 **additive-symbols** 的用法。

<html>
<head>
<style>
   @counter-style chapter-counter {
      system: additive ;
      additive-symbols: 5 V, 4 IV, 3 III, 1 I;
   }
   ol {
      list-style: chapter-counter;
      color: brown;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
<ol>
   <li>Chapter A</li>
   <li>Chapter B</li>
   <li>Chapter C</li>
   <li>Chapter D</li>
   <li>Chapter E</li>
   <li>Chapter F</li>
   <li>Chapter G</li>
   <li>Chapter H</li>
</ol>
</body>
</html>

列印頁面