@counter-style 规则介绍

85 阅读1分钟

①在 HTML 中,项目符号可以使用 type 属性指定,也可以使用 CSS 属性 list-style-type 指定;
②@counter-style 规则的基本结构:@counter-style 任意自定义名称 {system: 计数系统;symbols: 计数符号;additive-symbols: 附加符号;negative: 负数符号;prefix: 前缀;suffix: 后缀;range: 范围;pad: 补全;speak-as: 如何阅读;fallback: 备份计数规则};
③system 属性表示计数系统,也就是计数用的算法;属性值有:cyclic、numeric、alphabetic、symbolic、additive、fixed;
④cyclic 比较适合用在无序列表上,只需要指定一个字符,就可以无限循环使用;
⑤alphabetic 表示按字母编号系统将指定符号解释为数字。做多支持 a – z 共 26 个英文字母,如果顺序超过 z(或者指定字符数量),则会按照 “aa”, “ab”, “ac”… 继续解释项目符号;
⑥symbols 字符是不能直接用数字,或者是乱七八糟的符号表示的,否则自定义符号是无效的,一定要加引号才行;
⑦numeric 表示使用数值系统符号计数算法,此算法和上面的 alphabetic 非常类似,区别在于,alphabetic 是从 1 开始的,后面是 2。而 numeric 是从 0 开始的,后面才是 1, 再然后是 2。因此,numeric 值使用的时候需要保证至少 2 个字符被指定;
⑧fixed 表示显示的序号字符是固定的,如果超出,不会循环,而是使用背后对应的数字代替呈现;
⑨symbolic 表示通过平铺字符的方式进行项目符号显示;
(参考:www.zhangxinxu.com/wordpress/2…