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>

打印页面