搜尋

定義計數規則 @counter-style

通常清單的計數器會按照預設格式產生對應的數值或符號，如果進一步透過「@counter-style」定義計數器規則，就能讓計數器產生更多變化，大幅增加計數器的彈性，這篇教學會介紹「計數規則 @counter-style」以及各個描述子的用法。

快速導覽：

CSS 教學 - 定義計數規則 @counter-style

認識 @counter-style

在 CSS 的語法中，只要有 at 符號「@」的區塊，都是和「設定」有關的程式內容，而「@counter-style」就是專門針對「計數器」的規則，由於瀏覽器都會有預設的計數器規則，通常不會特別去設定，但如果希望計數器能有更多變化，例如使用自訂且具有順序的表情符號，或最小字元數、負值樣式等，就必須透過 @counter-style 進行設定。

撰寫 @counter-style 時會先定義一個計數器的「名稱」，接著用大括號包覆「描述子」，整體看起來很像在寫 CSS 樣式表。

@counter-style 規則名稱 {
  描述子1: 設定值;
  描述子2: 設定值;
  ......
}

下方範例使用兩個 @counter-style 定義 aa 和 bb 兩個計數器，接著讓不同的清單，透過 list-style 指定 aa 或 bb 計數器，就能呈現別具特色的清單標記。

表情符號參考：表情符號、表情圖示、Emoji

線上展示：https://codepen.io/oxxo/pen/QWXzaLG

<!-- HTML 程式碼 -->
<ul class="a">
  <li>apple</li>
  <li>banana</li>
  <li>oxxo.studio</li>
  <li>coconut</li>
  <li>papaya</li>
  <li>orange</li>
</ul>
<ul class="b">
  <li>apple</li>
  <li>banana</li>
  <li>oxxo.studio</li>
  <li>coconut</li>
  <li>papaya</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  /* 定義計數器規則 aa */
  @counter-style aa {
    system: cyclic;
    symbols: "☝️" "✌️" "👌" "✋" "🖐️" "🤙";
  }
  /* 定義計數器規則 bb */
  @counter-style bb {
    system: cyclic;
    symbols: "🍎" "🍏" "🍒" "🥝" "🍆" "🌶️";
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
</style>

CSS 教學 - 定義計數規則 @counter-style - 認識 @counter-style

@counter-style 描述子

@counter-style 有許多的「描述子」，描述子可以當作計數器「樣式屬性」，下方列出 @counter-style 的描述子：

描述子 說明
system 計數器模式，設定值為 cyclic、additive、extends numeric、alphabetic、symbolic、additive、fixed。
symbols 計數器標記符號，不支援計數器模式 additive、extends。
additive-symbols 計數器模式 additive 所使用的標記符號。
prefix 計數器標記之前的字串或符號。
suffix 計數器標記之後的字串或符號。
pad 計數器的最小字元數，以及定義填滿最小字元數的字串或符號。
negative 計數器的最小字元數，以及定義填滿最小字元數的字串或符號。
range 數值範圍內的計數器模式。
fallback 超過範圍後的計數器模式。
speak-as 文字轉語音的計數器讀法。

描述子 system

描述子 system 表示這個計數器的系統，有下列幾種系統：

屬性值 說明
fixed 固定系統，超過循環範圍就使用數字計數。
cyclic 循環系統，循環時從頭顯示 symbols 符號。
numeric 數值系統，循環發生時重複疊加數字。
alphabetic 字母系統，循環發生時重複疊加字母。
symbolic 符號系統，循環發生時重複疊加符號。
additive 附加轉換系統，對應的計數轉換成指定數字、文字或符號，需搭配 additive-symbols 描述子。
extends 擴展系統，替指定系統額外增加其他系統。

fixed 固定系統

計數器使用 fixed 固定系統時，當計數器的範圍超過了 symbols 所定義的符號數量，就會改用預設的數值計數，fixed 支援第二個屬性值，第二個屬性值表示「起始的數字」。

線上展示：https://codepen.io/oxxo/pen/qBzLpWJ

<!-- HTML 程式碼 -->
<ul class="a">
  <li>apple</li><li>banana</li><li>oxxo.studio</li><li>coconut</li><li>papaya</li><li>orange</li><li>watermelon</li><li>pear</li>
</ul>
<ul class="b">
  <li>apple</li><li>banana</li><li>oxxo.studio</li><li>coconut</li><li>papaya</li><li>orange</li><li>watermelon</li><li>pear</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  @counter-style aa {
    system: fixed;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";  /* 1～5 個項目會套用符號 */
  }
  @counter-style bb {
    system: fixed 5;     /* 6～10 個項目會套用符號 */
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  ul {
    float: left;
    margin: 10px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
</style>

CSS 教學 - 定義計數規則 @counter-style - system:fixed 固定系統

cyclic 循環系統

計數器使用 cyclic 固定系統時，當計數器的範圍超過了 symbols 所定義的符號數量，就會自動使用符號的第一個，從頭繼續顯示並循環下去。

線上展示：https://codepen.io/oxxo/pen/gONZoOO

<!-- HTML 程式碼 -->
<ul class="a">
  <li>apple</li><li>banana</li><li>oxxo.studio</li><li>coconut</li><li>papaya</li><li>orange</li><li>watermelon</li><li>pear</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  .a {list-style: aa;}
</style>

CSS 教學 - 定義計數規則 @counter-style - system:cyclic 循環系統

numeric 數字系統、alphabetic 字母系統

計數器的 numeric 數字系統和 alphabetic 字母系統的用法大同小異，當計數器的範圍超過了 symbols 所定義的數字或字母數量，就會從頭疊加數字或字母，需要注意 numeric 數字系統會從定義數字的「第二個」開始計算，下方範例 aa 計數器使用數字系統，當超過第九個項目之後，1 就會放在 0 的前面變成 10、 11...，而 bb 使用字母系統，當超過第四個項目之後，A 會再度放在前方變成 AA、AB... 依此類推。

線上展示：https://codepen.io/oxxo/pen/BagvJao

<!-- HTML 程式碼 -->
<ul class="a">
  <li>apple</li><li>banana</li> <li>oxxo.studio</li><li>coconut</li><li>papaya</li><li>orange</li><li>watermelon</li><li>pear</li><li>grape</li><li>peach</li><li>melon</li>
</ul>
<ul class="b">
  <li>apple</li><li>banana</li> <li>oxxo.studio</li><li>coconut</li><li>papaya</li><li>orange</li><li>watermelon</li><li>pear</li><li>grape</li><li>peach</li><li>melon</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  @counter-style aa {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  }
  @counter-style bb {
    system: alphabetic;
    symbols: "A" "B" "C" "D";
  }
  ul {
    float: left;
    margin: 10px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
</style>

CSS 教學 - 定義計數規則 @counter-style - system:numeric 數字系統、system:alphabetic 字母系統

運用 numeric 數字系統還可以很輕鬆地做出十進位、二進位或十六進位的清單效果。

線上展示：https://codepen.io/oxxo/pen/XWLoVWZ

<!-- HTML 程式碼 -->
<ul class="a">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="b">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="c">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  @counter-style aa {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  }
  @counter-style bb {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E";
  }
  @counter-style cc {
    system: numeric;
    symbols: "0" "1";
  }
  ul {
    float: left;
    margin: 10px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - system:numeric 數字系統十進位、二進位或十六進位

symbolic 符號系統

計數器使用 symbolic 符號系統時，當計數器的範圍超過了 symbols 所定義的符號數量，就會從頭疊加符號，注意 symbolic 符號系統和數字、字母系統不同，符號系統會疊加「同樣的符號」，例如 O、X、Y、OO、XX、YY... 而不是像數字 1、2、3、11、12、13... 或字母 A、B、C、AA、AB、AC...。

線上展示：https://codepen.io/oxxo/pen/vYqvpYw

<!-- HTML 程式碼 -->
<ul class="a">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="b">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="c">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: symbolic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  @counter-style bb {
    system: symbolic;
    symbols: "A" "B" "C" "D" "E";
  }
  @counter-style cc {
    system: symbolic;
    symbols: "0" "1" "2" "3" "4";
  }
  ul {
    float: left;
    margin: 10px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - system:symbolic 符號系統

additive 附加轉換系統

計數器使用 additive 附加轉換系統時，會將對應的數字轉換成特定的數字、文字或符號，當計數器的範圍進入指定的數字範圍時就會套用，使用時需要注意兩點，第一、搭配 additive-symbols 描述字定義數字、文字或符號，第二，數字必須由「大到小」，不然就無法正常顯示，下方範例計數器 aa 將五個符號分別對應 5～1，清單項目每五個為一次循環，計數器 bb 對應 15、10、3、2、1，計數器 cc 對應 20、10、5、2、1。

線上展示：https://codepen.io/oxxo/pen/QWXzawG

<!-- HTML 程式碼 -->
<ul class="a">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="b">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="c">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: additive;
    additive-symbols: 5 🍎, 4 🍒, 3 🥝, 2 🍆, 1 🌶️;   /* 注意由大到小 */
  }
  @counter-style bb {
    system: additive;
    additive-symbols: 15 🍎, 10 🍒, 3 🥝, 2 🍆, 1 🌶️; /* 注意由大到小 */
  }
  @counter-style cc {
    system: additive;
    additive-symbols: 20 🍎, 10 🍒, 5 🥝, 2 🍆, 1 🌶️; /* 注意由大到小 */
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc; }
</style>

CSS 教學 - 定義計數規則 @counter-style - system:additive 附加轉換系統

extends 擴展系統

計數器的 additive 擴展系統會將「現有的計數器進行擴展」，並搭配其他的描述子之後成為新的計數器，如此一來就可以將某些計數器當作初始值，不用每次都產生新的計數器，下方範例以計數器 aa 為基礎，

線上展示：https://codepen.io/oxxo/pen/ZEdVvYa

<!-- HTML 程式碼 -->
<ul class="a">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="b">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="c">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  @counter-style bb {
    system: extends aa;  /* 從 aa 擴展 */
    pad: 2 "ABC";        /* 前方延伸兩位，該位數使用 ABC */
  }
  @counter-style cc {
    system: extends aa;
    pad: 3 "🍎";        /* 前方延伸三位，該位數使用 🍎 */
    suffix: '>> '       /* 符號後方加上 >> */
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - system:extends 擴展系統

描述子 symbols

描述子 symbols 主要擺放清單項目的「數字、文字或符號」，項目之間使用「空白」分隔，建議都「使用引號」包覆要產生的內容，下方範例呈現「數字、文字和符號」的寫法。

線上展示：https://codepen.io/oxxo/pen/xxompba

<!-- HTML 程式碼 -->
<ul class="a">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="b">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="c">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  @counter-style bb {
    system: cyclic;
    symbols: "1" "2" "3" "4" "5";
  }
  @counter-style cc {
    system: cyclic;
    symbols: "A" "B" "C" "D" "E";
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 symbols

描述子 additive-symbols

描述子 additive-symbols 是和 system:additive 附加轉換系統搭配的描述子，可以將對應的數字轉換成指定的「數字、文字或符號」，每個項目之間採用「逗號」分隔，每個項目包含「數字」和「對應的數字、文字或符號」，數字必須由「大到小」，不然就無法正常顯示，下方範例計數器 aa 將五個符號分別對應 5～1，清單項目每五個為一次循環，計數器 bb 對應 15、10、3、2、1，計數器 cc 對應 20、10、5、2、1。

線上展示：https://codepen.io/oxxo/pen/OJerzVy

<!-- HTML 程式碼 -->
<ul class="a">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="b">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="c">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: additive;
    additive-symbols: 5 🍎, 4 🍒, 3 🥝, 2 🍆, 1 🌶️;   /* 注意由大到小 */
  }
  @counter-style bb {
    system: additive;
    additive-symbols: 15 🍎, 10 🍒, 3 🥝, 2 🍆, 1 🌶️; /* 注意由大到小 */
  }
  @counter-style cc {
    system: additive;
    additive-symbols: 20 🍎, 10 🍒, 5 🥝, 2 🍆, 1 🌶️; /* 注意由大到小 */
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc; }
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 additive-symbols

描述子 prefix、suffix

描述子 prefix、suffix 分別表示要在清單符號的「前面」或「後面」加上「數字、文字或符號」，下方範例會用 system:extends 擴展系統延伸計數器 aa，並在延伸的 bb 前方加上愛心符號，在延伸的 cc 後方加上愛心符號。

線上展示：https://codepen.io/oxxo/pen/ZEdVvGa

<!-- HTML 程式碼 -->
<ul class="a">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="b">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="c">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  @counter-style bb {
    system: extends aa;
    prefix: "❤️.";        /* 前方加上愛心 */
  }
  @counter-style cc {
    system: extends aa;
    suffix: ".❤️. ";      /* 後方加上愛心 */
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 prefix、suffix

描述子 pad

描述子 pad 有兩個屬性值，第一個屬性值為「計數器的最小字元數」，第二個屬性值是「要填滿的數字、文字或符號」，如果標記的「數字、文字或符號」字元長度小於最小字元數，就會使用填滿的數字、文字或符號填滿，下方範例會用 system:extends 擴展系統延伸計數器 aa，並在延伸的 bb 和 cc 分別使用 pad 填滿不足的字元。

線上展示：https://codepen.io/oxxo/pen/GRbPypR

<!-- HTML 程式碼 -->
<ul class="a">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="b">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>
<ul class="c">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒🍒" "🥝🥝🥝";
  }
  @counter-style bb {
    system: extends aa;    /* 最小字元數 2，所以蘋果前方會補愛心*/
    pad: 2 "❤️";
  }
  @counter-style cc {
    system: extends aa;
    pad: 3 "❤️";           /* 最小字元數 3，所以蘋果和櫻桃前方會補愛心*/
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 pad

描述子 negative

描述子 negatived 是針對「ol」有序清單的描述子，且只能套用在 alphabetic、numeric、symbolic 和 additive 計數器系統，當清單順序從「負值」開始時，就可以在清單項目符號的前方或後方加入數字、文字或符號。

下方範例會用 system:extends 擴展系統延伸計數器 aa，並在延伸的 bb 和 cc 分別使用 negative 加入內容，使用單一屬性值表示添加在前方，用空白分隔兩個屬性值可以加在前後* ( 注意 HTML 裡的 ol 元素有加上 start="-3" 從 -3 開始計數 )。

線上展示：https://codepen.io/oxxo/pen/jOjXYbB

<!-- HTML 程式碼 -->
<ol class="a" start="-3">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ol>
<ol class="b" start="-3">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ol>
<ol class="c" start="-3">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ol>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: numeric;
    symbols: "🍎" "🍒" "🥝";
  }
  @counter-style bb {
    system: extends aa;
    negative: "💩";       /* 大便加在前方 */
  }
  @counter-style cc {
    system: extends aa;
    negative: "💩" "💩";   /* 前後方都加上大便 */
  }
  ol {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc;}
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 negative

描述子 range、fallback

描述子 range 表示計數器會產生標記的「範圍」，而 fallback 則表示計數器「範圍外」要套用的其他計數器樣式，下方範例 bb 和 cc 會透過 aa 進行延展，bb 會使用 range 指定兩個範圍，分別是 2～4 和 9～12，數字範圍間使用空白分隔，不同範圍使用逗號分格，而 cc 則除了有指定範圍，更利用 fallback 指定範圍外要套用 poo 計數器，範圍外的清單項目就都會是兩個大便符號。

線上展示：https://codepen.io/oxxo/pen/eYwbypy

<!-- HTML 程式碼 -->
<ul class="a">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="b">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>
<ul class="c">
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
  }
  @counter-style poo {
    system: cyclic;
    symbols: "💩💩";
  }
  @counter-style bb {
    system: extends aa; 
    range: 2 4, 9 12;
  }
  @counter-style cc {
    system: extends aa; 
    range: 2 4, 9 12;
    fallback: poo; 
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
  .b {list-style: bb;}
  .c {list-style: cc; }
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 range、fallback

描述子 speak-as

描述子 speak-as 表示進行語音朗讀清單時，要朗讀的內容，例如念出「十一」，不會發生遇到蘋果圖案時會朗讀 apple 的狀況，該描述子有下列幾種屬性值：

屬性值 說明
auto 自動選擇適合的朗讀方式。
bullets 用特殊音效表現這是一個清單項目。
numbers 朗讀清單項目的數字。
words 朗讀清單項目文字。
spell-out 每個字母分開念。
標記樣式 使用「list-style-type 清單標記類型」名稱。

使用方法如下 ( 因沒有無障礙網頁閱讀器可以測試，只能先列出範例 ):

線上展示：https://codepen.io/oxxo/pen/ExBGoVR

<!-- HTML 程式碼 -->
<ul class="a">
  <li>banana</li><li>apple</li><li>oxxo.studio</li><li>coconut</li><li>peach</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  body {padding: 0 30px;}
  @counter-style aa {
    system: cyclic;
    symbols: "🍎" "🍒" "🥝" "🍆" "🌶️";
    speak-as: numbers;
  }
  ul {
    float: left;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px 40px;
  }
  .a {list-style: aa;}
</style>

CSS 教學 - 定義計數規則 @counter-style - 描述子 speak-as

小結

透過 @counter-style 可以定義非常多樣的計數器規則，透過這些規則，就更能靈活的操控清單標記樣式，做出各種有趣又富有變化的清單效果。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與函式

變數 數學計算 文字與清單計數 生成內容與引號 色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子