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>

列印頁面