自定义counter-type

上一篇,怎么使用计数器,counter()默认返回的是计数器的数值.
第二个参数,就是counter-type类型,可以写定义返回类型,系统提供的类型,如大小字字母,拉丁字母,中文数字.
也可以自己提供一个字典,映射.

除了counter使用,以前学用的ol,ul中list-style-type预定义了类型一样.

常用预定义类型

list-style-type 属性用于指定列表项标记的类型，它可以接受以下参数值：

  • none: 不显示列表项标记。
  • disc: 使用实心圆作为列表项标记。
  • circle: 使用空心圆作为列表项标记。
  • square: 使用实心方块作为列表项标记。
  • decimal: 使用十进制的阿拉伯数字（1, 2, 3, 4, ...）作为列表项标记。
  • decimal-leading-zero: 使用带前导零的十进制数字（01, 02, 03, 04, ...）作为列表项标记。
  • lower-roman: 使用小写罗马数字（i, ii, iii, iv, v, ...）作为列表项标记。
  • upper-roman: 使用大写罗马数字（I, II, III, IV, V, ...）作为列表项标记。
  • lower-alpha: 使用小写字母（a, b, c, d, ...）作为列表项标记。
  • upper-alpha: 使用大写字母（A, B, C, D, ...）作为列表项标记。
  • lower-greek: 使用小写希腊字母（α, β, γ, δ, ...）作为列表项标记。
  • cjk-decimal: 使用中日韩数字（一, 二, 三, 四, ...）作为列表项标记。
  • cjk-ideographic: 使用简体中文作为列表项标记。
  • hiragana: 使用平假名作为列表项标记。
  • katakana: 使用片假名作为列表项标记。
  • katakana-iroha: 使用伊洛哈片假名作为列表项标记。
  • simp-chinese-informal: 使用简体中文小写数字（一, 二, 三, 四, ...）作为列表项标记。
  • simp-chinese-formal: 使用简体中文大写数字（壹, 贰, 叁, 肆, ...）作为列表项标记。
  • trad-chinese-informal: 使用繁体中文小写数字作为列表项标记。
  • trad-chinese-formal: 使用繁体中文大写数字作为列表项标记。

自定义类型

以上预定义的类型如果不能满足需求,可以根据需求,自定义类型.

通过 @counter-style 来自定义类型.
参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@counter-style

@counter-style <样式名> {
    system: <转换算法>
    symbols: <字典列表>
    additive-symbols: <additive-symbols>
    negative: <负的符号>
    prefix: <前缀>
    suffix: <后缀>
    range: <生效范围>
    pad: <填充>
    speak-as: <speak-as>
    fallback: <备用的系统>
}

例:

@counter-style my-list{
    symbols: Ⓐ Ⓑ Ⓒ ;
    system: fixed;
    suffix: ".";
}

ul {
    list-style-type: my-list;
}

图例:

system的参数

常用关键字值cyclic、numeric、alphabetic、symbolic、additive或fixed

参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system

cyclic:

循环浏览提供的符号列表。一旦到达符号列表的末尾，它将循环回到开头并重新开始。该系统对于仅具有一个符号的简单项目符号样式或具有多个符号的样式非常有用。描述符中必须至少指定一个符号symbols，否则计数器样式无效。

@counter-style hart{
    symbols: ❤️;
    system: cyclic;
}

ul {
    list-style-type: hart;
}

fixed
定义指定的有限符号集。一旦系统循环完所有指定的符号，它将回退。该系统在计数器值有限的情况下非常有用。描述符中必须至少指定一个符号symbols，否则计数器样式无效。也可以在系统之后指定一个可选值，作为第一个符号的值。如果省略该整数，则第一个整数的值为1。

@counter-style hart{
    symbols: 金 木 水 火 土;
    system: fixed 1;
}

ul {
    list-style-type: hart;
}

symbolic
循环浏览提供的符号列表。在每次连续通过循环时，用于计数器表示的符号加倍、三倍等等。例如，如果提供的原始符号是“◽”和“◾”，则在每次连续传递时，它们将变成“◽◽”和“◾◾”、“◽◽◽”和“◾◾◾”等。描述符中必须至少指定一个符号symbols，否则计数器样式无效。该计数器系统仅适用于正计数器值。


@counter-style hart{
    symbols: ★;
    system: symbolic;
    range: 1 5;
}

ul {
    list-style-type: hart;
}

alphabetic
将指定的符号解释为字母编号系统中的数字。如果字符"a"到"z"被指定为计数器样式中的符号，alphabetic则系统的前 26 个计数器表示形式将为"a"，"b"最多"z"。symbolic到目前为止，该行为与上述系统的行为相同。然而，之后，"z"它将继续为"aa"，，"ab"……"ac"

描述符symbols必须包含至少两个符号，否则计数器样式无效。描述符中提供的第一个计数器符号symbols被解释为1，下一个被解释为2，依此类推。该系统也严格定义为正计数器值。

类似excel的列


@counter-style hart{
    symbols: A B C;
    system: alphabetic;
}

ul {
    list-style-type: hart;
}

numeric
将计数器符号解释为位值编号系统中的数字。alphabetic数字系统与上述系统类似。主要区别在于，在alphabetic系统中，描述符中给出的第一个计数器符号symbols被解释为1，下一个被解释为2，依此类推。然而，在数字系统中，第一个计数器符号被解释为 0，下一个计数器符号被解释为1，然后2，依此类推。

描述符中必须至少指定两个计数器符号symbols，否则计数器样式无效。

从0开始.

@counter-style hart{
    symbols: "0" "1"   ;
    system: numeric;
}

ul {
    list-style-type: hart;
    margin-left: 100px;
}

additive
用于表示“符号值”编号系统，例如罗马数字，它不是重复使用不同位置的数字来获取不同的值，而是为较大的值定义附加数字。在这样的系统中，可以通过将数字中的数字相加来找出数字的值。

调用的附加描述符additive-symbols必须至少用一个附加元组指定，否则计数器样式规则将无效。加法元组类似于复合计数器符号，它由两部分组成：普通计数器符号和非负整数权重。加法元组必须按照其权重的降序指定，否则系统无效。

自制罗马数字.

extends
允许作者使用另一种计数器风格的算法，但改变其其他方面。如果计数器样式规则正在使用extends系统，则任何未指定的描述符及其值都将从指定的扩展计数器样式中获取。如果在扩展中指定的计数器样式名称不是当前定义的计数器样式名称，它将从十进制计数器样式扩展。

它不能包含symbolsoradditive-symbols描述符，否则计数器样式规则无效。如果一个或多个计数器样式定义与其扩展值形成一个循环，则浏览器会将所有参与的计数器样式视为从十进制样式扩展。

扩展其他计数器. 一般用来修改

@counter-style hart{
  system: extends lower-alpha;
  prefix: "[";
  suffix: "] ";

}

原作者:阿金
本文地址：https://hi-arkin.com/archives/zi-ding-yi-countertype.html

标签: counter css3

（本篇完）

评论