CSS @counter-style - 系统

系统描述符概述了将计数器的整数值转换为字符串表示的方法。

此规范应用于@counter-style中，以确定定义的样式的行为。

这可以以三种形式之一出现

其中一个关键字选项：cyclic、numeric、alphabetic、symbolic、additive或fixed。
关键字fixed后跟一个整数。
关键字或extends后跟@counter-style的名称。

语法

system = Keyword | [fixed <integer>?] | [extends <counter-style-name> ]

CSS system - cyclic 值

此系统循环遍历符号列表，到达末尾时返回到开头。它适用于简单的单符号枚举样式和更复杂的多符号样式。

以下示例演示了cyclic系统的用法。

 <html>
<head>
<style>
   @counter-style chapter-counter {
      system: cyclic ;
      symbols: ▣ ;
      suffix: " ";
   }
   ul {
      list-style: chapter-counter;
      color: orange;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
	<ul>
		<li>Chapter A</li>
		<li>Chapter B</li>
		<li>Chapter C</li>
		<li>Chapter D</li>
		<li>Chapter E</li>
	</ul>
</body>
</html>

CSS system - fixed 值

此系统定义了一组有限的符号。它适用于有限的计数器值，并且在描述符中至少需要一个符号。

以下示例演示了fixed系统的用法。

<html>
<head>
<style>
   @counter-style item-counter {
      system: fixed ;
      symbols: ▣ ■ □ ;
      suffix: " ) ";
   }
   ul {
      list-style: item-counter;
      color: blue;
      background-color: lightgray;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <ul>
      <li>Item I</li>
      <li>Item II</li>
      <li>Item III</li>
      <li>Item IV</li>
      <li>Item V</li>
      <li>Item VI</li>
      <li>Item VII</li>
   </ul>
</body>
</html>

CSS system - symbolic 值

此系统循环遍历符号列表，每次循环都将其加倍、三倍等。有效的样式在描述符中至少需要一个符号，并且仅适用于正计数器值。

以下示例演示了symbolic系统的用法。

<html>
<head>
<style>
   @counter-style item-counter {
      system: symbolic ;
      symbols: '*' '$';
      suffix: " ) ";
   }
   ul {
      list-style: item-counter;
      color: blue;
      background-color: lightgray;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Symbolic Counter<h1>
   <ul>
      <li>Item I</li>
      <li>Item II</li>
      <li>Item III</li>
      <li>Item IV</li>
      <li>Item V</li>
      <li>Item VI</li>
      <li>Item VII</li>
      <li>Item VIII</li>
      <li>Item IX</li>
      <li>Item X</li>
      <li>Item XI</li>
      <li>Item XII</li>
   </ul>
</body>
</html>

CSS system - alphabetic 值

此系统将给定的符号解释为数字并创建字母编号序列。有效的计数方法至少需要两个符号。

以下示例演示了alphabetic系统的用法。

<html>
<head>
<style>
   @counter-style title-counter {
      system: alphabetic ;
      symbols: a b c d ;
      suffix: " ) ";
   }
   ul {
      list-style: title-counter;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Alphabetic Counter<h1>
   <ul>
      <li>Title 1</li>
      <li>Title 2</li>
      <li>Title 3</li>
      <li>Title 4</li>
      <li>Title 5</li>
      <li>Title 6</li>
      <li>Title 7</li>
      <li>Title 8</li>
      <li>Title 9</li>
      <li>Title 10</li>
   </ul>
</body>
</html>

CSS system - numeric 值

在此系统中，计数器符号被视为定位数制中的数字，类似于字母系统。但是，在此数字系统中，第一个符号表示 0，下一个表示 1，依此类推。

以下示例演示了numeric系统的用法。

<head>
<style>
   @counter-style title-counter {
      system: numeric ;
      symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9" ;
      suffix: "] ";
   }
   ul {
      list-style: title-counter;
      font-size: 25px;
      color: red;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Numeric Counter with numbers<h1>
   <ul>
      <li>Title A</li>
      <li>Title B</li>
      <li>Title C</li>
      <li>Title D</li>
      <li>Title E</li>
      <li>Title F</li>
      <li>Title G</li>
      <li>Title H</li>
      <li>Title I</li>
   </ul>
</body>
</html>

CSS system - additive 值

此计数器样式适用于罗马数字等符号值编号系统，其中唯一符号表示值。这些系统使用其他符号表示更大的值，并且可以通过添加数字的位数来找到数字的值。

以下示例演示了additive系统的用法。

<html>
<head>
<style>
   @counter-style upper-roman {
      system: additive;
      range: 1 10;
      additive-symbols: 10 X, 5 V, 1 I, 2 II;     
   }
   ul {
      list-style: upper-roman;
      font-size: 25px;
      color: blue;
      background : lightblue;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Additive Example<h1>
   <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
      <li>Test 4</li>
      <li>Test 5</li>
      <li>Test 6</li>
      <li>Test 7</li>
      <li>Test 8</li>
      <li>Test 9</li>
      <li>Test 10</li>
   </ul>
</body>
</html>

CSS system - extends 值

此功能允许作者应用另一个计数器样式的算法，同时修改其他方面。在extends系统中，未指定的描述符和值将从指定的计数器样式继承。

以下示例演示了extends系统的用法。

<html>
<head>
<style>
   @counter-style demo-alpha {
      system: extends upper-alpha;
      prefix:"[ ";
      suffix: " ] "
   }
   ul {
      list-style: demo-alpha;
      font-size: 25px;
      color: #fc5203;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Extends Example<h1>
   <ul>
      <li>Heading 1</li>
      <li>Heading 2</li>
      <li>Heading 3</li>
      <li>Heading 4</li>
      <li>Heading 5</li>
      <li>Heading 6</li>
      <li>Heading 7</li>
      <li>Heading 8</li>
      <li>Heading 9</li>
      <li>Heading 10</li>
   </ul>
</body>
</html>

打印页面