计数规则 ( @counter-style )

通常清单的计数器会按照默认格式产生对应的数值或符号，如果进一步透过“@counter-style”定义计数器规则，就能让计数器产生更多变化，大幅增加计数器的弹性，这篇教学会介绍“计数规则 @counter-style”以及各个描述子的用法。

延伸阅读：清单样式 list-style、清单计数器 counter()、counters()

快速导览：

• 认识 @counter-style
• @counter-style 描述子
  • system、symbols、additive-symbols
  • prefix、suffix、pad
  • negative、range、fallback、speak-as

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识 @counter-style

在 CSS 的语法中，只要有 at 符号“@”的区块，都是和“设定”有关的程序内容，而“@counter-style”就是专门针对“清单计数器”的规则定义，由于浏览器都会有默认的计数器规则，通常不会特别去设定，但如果希望计数器能有更多变化，例如使用自订且具有顺序的表情符号，或最小字元数、负值样式等，就必须透过 @counter-style 进行设定。

撰写 @counter-style 时会先定义一个计数器的“名称”，接着用大括号包覆“描述子”，整体看起来很像在写 CSS 样式表。

注意，计数器名称请不要和默认的清单标记类型相同，避免互相干扰，参考：list-style-type 清单标记类型。

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

下方范例使用两个 @counter-style 定义 aa 和 bb 两个计数器，接着让不同的清单，透过 list-style 或 list-style-type 指定 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>

@counter-style 描述子

@counter-style 有许多的“描述子”，描述子可以当作计数器“样式属性”，下方列出 @counter-style 的描述子：

描述子 system

描述子 system 表示这个计数器的系统，有下列几种系统：

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>

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>

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>

运用 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>

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>

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>

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>

描述子 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>

描述子 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>

描述子 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>

描述子 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>

描述子 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>

描述子 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>

描述子 speak-as

描述子 speak-as 表示进行语音朗读清单时，要朗读的内容，例如念出“十一”，不会发生遇到苹果图案时会朗读 apple 的状况，该描述子有下列几种属性值：

使用方法如下 ( 因没有无障碍网页阅读器可以测试，只能先列出范例 ):

线上展示：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>

小结

透过 @counter-style 可以定义非常多样的计数器规则，透过这些规则，就更能灵活的操控清单标记样式，做出各种有趣又富有变化的清单效果。

延伸阅读：清单样式 list-style、清单计数器 counter()、counters()

意见反馈