CSS @规则(At-rules)系列详解___@counter-style 规则使用方法

CSS @规则(At-rules)系列详解

___ @counter-style 规则使用方法

零、时光宝盒

**（**https://blog.csdn.net/weixin_69553582 逆境清醒）

鸟妈妈在雨天用自己的翅膀给小鸟撑起了一个温暖的家。希望你们和你们家人一起，共同在风雨中撑起一个温暖休憩的家，为了你们家人，也为了你们自己。

图片来源于网络视频截图。

逆境清醒

2024.10.17

一、@counter-style 规则定义和用法

在 CSS 中，@counter-style 规则用于自定义列表计数器的样式。

通过 @counter-style 规则，你可以定义列表项的计数器的样式，包括计数器的类型、前缀、后缀、递增方式等。这允许你创建自定义的计数器样式，使列表更具个性化和可读性。

@counter-style 规则使用以下语法：

css 复制代码

@counter-style name {
  properties;
}

其中，name 是你为计数器样式起的名称，properties 是一个包含计数器样式属性的声明块。

常用的 @counter-style 属性包括：

- system：指定计数器的类型，可以是 numeric、alphabetic、symbolic 或 fixed；
- symbols：指定计数器的符号；
- suffix：指定计数器的后缀；
- additive-symbols：用于指定多位数的计数器符号。

二、@counter-style 语法

2.1、正式语法

css 复制代码

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }

语法：

@counter-style @规则：

由计数器样式名称标识，并且可以使用由一个或多个描述符及其值组成的 <declaration-list> 对命名计数器的样式进行微调。

计数器样式名称<counter-style-name>：

为您的计数器样式提供一个名称。

它被指定为一个区分大小写的 <custom-ident>，不带引号。

该值不应等于 none。

与所有自定义标识符一样，计数器样式的值不能是 CSS 全局关键字。避免其他枚举的 CSS 属性值，包括列表和计数器样式属性的值。

计数器的名称不能是 decimal、disc、square、circle、disclosure-open 和 disclosure-closed 等不区分大小写的 list-style-type 属性值。

注意：

不可覆盖的计数器样式名称 decimal、disc、square、circle、disclosure-open 和 disclosure-closed 不能用作自定义计数器的名称。

但是，它们在预期 <counter-style-name> 数据类型的其他上下文中有效，例如在 system: extends <counter-style-name> 中。

2.2、更改与计数器关联的词缀

更改与计数器关联的词缀（前缀和/或后缀）

在列表中，计数器可能跟着一个句点 + 空格，用括号括起来，或者后面跟一个特定于脚本的分隔符，等等。事实上，同一页面上可能会使用不同的策略，具体取决于嵌套级别或使用列表的上下文。

对于此处显示的样式，我们应用通用的默认值。（通常，未指定 non，这将导致句点 + 空格后缀。如果你想要一个不同的词缀，你应该做适当的改变。

需要按如下方式显式定义仅空格后缀：

css 复制代码

suffix: ' ';

括号中的计数器需要同时定义 prefix 和 suffix：

css 复制代码

prefix: '(';
suffix: ') ';

注释用于描述给定样式的替代词缀，当它们涉及非 ASCII 字符或其他特殊排列时，将提供建议的代码。

例如，Myanmar 可能用作后缀，因此 Myanmar 部分包括：

css 复制代码

suffix: '။ ';

如果你想为给定的 counter 样式提供多个替代的词缀声明，你会发现使用标准扩展机制添加另一种样式是最有效的。

例如，下面定义了两种样式，它们仅在使用的前缀/后缀上有所不同。

样式一：

css 复制代码

@counter-style myanmar {
system: numeric;
symbols: '\FF10' '\FF11' '\FF12' '\FF13' '\FF14' '\FF15' '\FF16' '\FF17' '\FF18' '\FF19';
/* symbols: '０' '１' '２' '３' '４' '５' '６' '７' '８' '９'; */
prefix: '(';
suffix: ') ';
}
ol { list-style-type: myanmar; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>
<br>
<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ul>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

效果如下：

样式二：

css 复制代码

@counter-style myanmar {
system: numeric;
symbols: '\FF10' '\FF11' '\FF12' '\FF13' '\FF14' '\FF15' '\FF16' '\FF17' '\FF18' '\FF19';
/* symbols: '０' '１' '２' '３' '４' '５' '６' '７' '８' '９'; */
prefix: '';
suffix: "။ ";
}
ol { list-style-type: myanmar; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>
<br>
<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ul>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

效果如下：

2.3、描述符

|------------------|----------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------|
| 描述符 | | |
| system | 指定用于将计数器的整数值转换为字符串表示形式的算法。 | 如果该值为 cyclic、numeric、alphabetic、symbolic 或 fixed，则还必须指定 symbols 描述符。如果该值为 additive，则还必须指定 additive-symbols 描述符。 |
| symbols | 指定要用于标记表示的符号。如果 system 描述符设置为 cyclic、numeric、alphabetic、symbolic 或 fixed，则此描述符是必需的。 | 符号可以包含字符串、图像或自定义标识符。 |
| additive-symbols | 定义加法计数器的加法元组。描述符是一个计数器符号列表及其非负整数权重，按权重降序排列。如果system描述符设置为additive，则需要此描述符。 | 大多数算法使用symbols描述符中指定的符号来构建标记表示。加法计数器系统（例如罗马数字）由一系列加权符号组成。 |
| negative | 指定如果值为负数，则要附加到或前置到计数器表示的符号。 | |
| prefix | 指定应前置到标记表示的符号。前缀在最后阶段添加到表示中，在negative描述符为负计数器值添加的任何字符之前。 | |
| suffix | 类似于前缀描述符，指定附加到标记表示的符号。后缀位于标记表示之后，包括negative描述符为负计数器值添加的任何字符之后。 | |
| range | 定义计数器样式适用的值范围。如果使用计数器样式来表示此描述符定义范围之外的计数器值，则计数器样式将回退到其fallback样式。 | |
| pad | 当您需要标记表示具有最小长度时使用。例如，如果您希望计数器从01开始并依次递增到02、03、04等，则应使用pad描述符。对于大于指定pad值的表示，标记将按正常方式构建。 | |
| speak-as | 描述语音合成器（例如屏幕阅读器）如何宣布计数器样式。例如，列表项标记的值可以根据此描述符的值读出为数字或字母（对于有序列表）或音频提示（对于无序列表）。 | |
| fallback | 指定当指定的系统无法构造计数器值的表示形式，或者计数器值超出指定范围时要回退到的系统。如果指定的后备也无法表示该值，则使用后备样式的后备（如果指定了）。如果没有描述回退系统，或者如果回退系统链无法表示计数器值，那么它将最终回退到十进制样式。 | |
| | | |
| | | |

三、@counter-style 使用方法例子

3.1、指定符号使用Ⓐ Ⓑ Ⓒ Ⓓ。。。 Ⓩ

使用计数器样式指定符号

css 复制代码

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
li {
   list-style: circled-alpha;
}

上述计数器样式规则可以应用于如下列表

css 复制代码

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的计数前缀：

3.2、指定符号使用（指定符号symbols 码)

css 复制代码

@counter-style thumbs {
  system: cyclic;
  symbols: "\270D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

css 复制代码

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的计数前缀：

3.3、指定符号使用（指定具体的symbols 图像)

css 复制代码

@counter-style thumbs {
  system: cyclic;
  symbols: "🌻";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

css 复制代码

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的计数前缀：

3.4、自定义有序列表前缀

css 复制代码

@counter-style emoji-decimal {
  system: numeric;
  symbols: '\30\FE0F\20E3' '\31\FE0F\20E3' '\32\FE0F\20E3' '\33\FE0F\20E3' '\34\FE0F\20E3' '\35\FE0F\20E3' '\36\FE0F\20E3' '\37\FE0F\20E3' '\38\FE0F\20E3' '\39\FE0F\20E3';
  suffix: " ";
}

ol { list-style-type: emoji-decimal; }

css 复制代码

<ol>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ol>

这样，我们就可以得到自定义的有序列表前缀：

3.5、带圆圈的十进制

css 复制代码

@counter-style filled-circled-decimal{
system: fixed;
symbols: '\2776' '\2777' '\2778' '\2779' '\277a' '\277b' '\277c' '\277d' '\277e' '\277f' '\24EB' '\24EC' '\24ED' '\24EE' '\24EF' '\24F0' '\24F1' '\24F2' '\24F3' '\24F4';
/* symbols: '❶' '❷' '❸' '❹' '❺' '❻' '❼' '❽' '❾' '❿' '⓫' '⓬' '⓭' '⓮' '⓯' '⓰' '⓱' '⓲' '⓳' '⓴'; */
suffix: ' ';
}
ul { list-style-type: filled-circled-decimal; }

css 复制代码

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的带圆圈的十进制有序列表前缀：

3.6、全角十进制

css 复制代码

@counter-style fullwidth-decimal {
system: numeric;
symbols: '\FF10' '\FF11' '\FF12' '\FF13' '\FF14' '\FF15' '\FF16' '\FF17' '\FF18' '\FF19';
/* symbols: '０' '１' '２' '３' '４' '５' '６' '７' '８' '９'; */
suffix: '\FF0E';
/* suffix: '．'; */
}
ul { list-style-type: fullwidth-decimal; }

css 复制代码

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的全角十进制有序列表前缀：

3.7、括号大小为十进制

css 复制代码

@counter-style parenthesized-decimal {
system: fixed;
symbols: '\2474' '\2475' '\2476' '\2477' '\2478' '\2479' '\247A' '\247B' '\247C' '\247D' '\247E' '\247F' '\2480' '\2481' '\2482' '\2483' '\2484' '\2485' '\2486' '\2487';
/* symbols: '⑴' '⑵' '⑶' '⑷' '⑸' '⑹' '⑺' '⑻' '⑼' '⑽' '⑾' '⑿' '⒀' '⒁' '⒂' '⒃' '⒄' '⒅' '⒆' '⒇'; */
suffix: ' ';
}
ul { list-style-type: parenthesized-decimal; }

css 复制代码

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的括号大小为十进制有序列表前缀：

3.8、梵文

css 复制代码

@counter-style bodo {
system: alphabetic;
symbols: '\915' '\916' '\917' '\918' '\919' '\91A' '\91B' '\91C' '\91D' '\91E' '\91F' '\920' '\921' '\922' '\923' '\924' '\925' '\926' '\927' '\928' '\92A' '\92B' '\92C' '\92D' '\92E' '\92F' '\930' '\932' '\935' '\936' '\937' '\938' '\939' ;
/* symbols: 'क' 'ख' 'ग' 'घ' 'ङ' 'च' 'छ' 'ज' 'झ' 'ञ' 'ट' 'ठ' 'ड' 'ढ' 'ण' 'त' 'थ' 'द' 'ध' 'न' 'प' 'फ' 'ब' 'भ' 'म' 'य' 'र' 'ल' 'व' 'श' 'ष' 'स' 'ह' */
suffix: ') ';
}
ol { list-style-type: bodo; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的梵文有序列表前缀：

3.9、日语

css 复制代码

@counter-style hiragana {
system: alphabetic;
symbols: '\3042' '\3044' '\3046' '\3048' '\304A' '\304B' '\304D' '\304F' '\3051' '\3053' '\3055' '\3057' '\3059' '\305B' '\305D' '\305F' '\3061' '\3064' '\3066' '\3068' '\306A' '\306B' '\306C' '\306D' '\306E' '\306F' '\3072' '\3075' '\3078' '\307B' '\307E' '\307F' '\3080' '\3081' '\3082' '\3084' '\3086' '\3088' '\3089' '\308A' '\308B' '\308C' '\308D' '\308F' '\3090' '\3091' '\3092' '\3093';
/* symbols: あ い う え お か き く け こ さ し す せ そ た ち つ て と な に ぬ ね の は ひ ふ へ ほ ま み む め も や ゆ よ ら り る れ ろ わ ゐ ゑ を ん; */
suffix: '、';
}
ol { list-style-type: hiragana; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的日语有序列表前缀：

3.10、带圆圈的朝鲜语辅音

css 复制代码

@counter-style circled-korean-consonant {
system: fixed;
symbols: '\3260' '\3261' '\3262' '\3263' '\3264' '\3265' '\3266' '\3267' '\3268' '\3269' '\326A' '\326B' '\326C' '\326D';
/* symbols: '㉠' '㉡' '㉢' '㉣' '㉤' '㉥' '㉦' '㉧' '㉨' '㉩' '㉪' '㉫' '㉬' '㉭'; */
suffix: ' ';
}
ol { list-style-type:circled-korean-consonant; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的带圆圈的朝鲜语辅音有序列表前缀：

3.11、韩语

css 复制代码

@counter-style korean-hangul-formal {
system: additive;
range: -9999 9999;
additive-symbols: 9000 '\AD6C\CC9C', 8000 '\D314\CC9C', 7000 '\CE60\CC9C', 6000 '\C721\CC9C', 5000 '\C624\CC9C', 4000 '\C0AC\CC9C', 3000 '\C0BC\CC9C', 2000 '\C774\CC9C', 1000 '\C77C\CC9C', 900 '\AD6C\BC31', 800 '\D314\BC31', 700 '\CE60\BC31', 600 '\C721\BC31', 500 '\C624\BC31', 400 '\C0AC\BC31', 300 '\C0BC\BC31', 200 '\C774\BC31', 100 '\C77C\BC31', 90 '\AD6C\C2ED', 80 '\D314\C2ED', 70 '\CE60\C2ED', 60 '\C721\C2ED', 50 '\C624\C2ED', 40 '\C0AC\C2ED', 30 '\C0BC\C2ED', 20 '\C774\C2ED', 10 '\C77C\C2ED', 9 '\AD6C', 8 '\D314', 7 '\CE60', 6 '\C721', 5 '\C624', 4 '\C0AC', 3 '\C0BC', 2 '\C774', 1 '\C77C', 0 '\C601';
/* additive-symbols: 9000 구천, 8000 팔천, 7000 칠천, 6000 육천, 5000 오천, 4000 사천, 3000 삼천, 2000 이천, 1000 일천, 900 구백, 800 팔백, 700 칠백, 600 육백, 500 오백, 400 사백, 300 삼백, 200 이백, 100 일백, 90 구십, 80 팔십, 70 칠십, 60 육십, 50 오십, 40 사십, 30 삼십, 20 이십, 10 일십, 9 구, 8 팔, 7 칠, 6 육, 5 오, 4 사, 3 삼, 2 이, 1 일, 0 영 */
suffix:', ';
negative: "\B9C8\C774\B108\C2A4  ";
/* 마이너스 (followed by a space) */
}
ol { list-style-type:korean-hangul-formal; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的韩语有序列表前缀：

3.9、泰语

css 复制代码

@counter-style thai {
system: numeric;
symbols: '\E50' '\E51' '\E52' '\E53' '\E54' '\E55' '\E56' '\E57' '\E58' '\E59';
/* symbols: '๐' '๑' '๒' '๓' '๔' '๕' '๖' '๗' '๘' '๙'; */
}

ol { list-style-type: thai; }

css 复制代码

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的泰语有序列表前缀：