计数器样式 | @counter-style (Counter Styles)

  •   CSS 中文开发手册

    计数器样式 | @counter-style (Counter Styles) - CSS 中文开发手册

    @counter-style是一个CSSat-rule ,它让开发者可以自定义counter的样式。 一个 @counter-style规则 定义了如何把一个计数器的值转化为字符串表示。

    @counter-style thumbs {
      system: cyclic;
      symbols: "F44D";
      suffix: " ";
    }
    
    ul {
       list-style: thumbs;
    }

    最初版的CSS定义了一系列很好用的计数器样式, 尽管近几年又添加了很多样式,但是这种限制方式被证明已经不能满足全球化的排版了。@counter-style规则用一种开放的方式弥补了这一缺点,在预定义的样式不能满足需求时,它可以使开发者自定义他们自己的计数器样式。

    语法

    描述

    每个 @counter-style 由一个名称标识并具有一组描述符。

    system指定一个算法,用于将计数器的整数值转化为字符串表示。

    negative指定一个符号,当计数器表示的值为负的时候,把这个符号加在值的前面或后面

    prefix指定一个符号,加在标记表示符的前面。前缀在最后阶段才会被加上,所以在计数器的最终表示中,它在negative前。

    suffix与prefix类似,suffix指定一个符号,加在标记表示符的后面。

    range 指定一个counter-style生效的范围,如果计数器的值不再这个范围内,那么自定义的counter-style不会生效,counter-style会后退到fallback的style。

    pad在你想要给标记表示符最小值时使用。比如说,你想要计数器从01开始,经过02,03,04,那么这时可以使用pad了。对于大于pad指定值的表示符,标记会恢复为normal。

    fallback定义一个备用的系统,当自定义的系统不能使用或者计数器的值超过了定义的范围时使用。如果备用系统也不能表示计数器的值,那么备用系统的备用系统(如果有的话)将会启用。如果没有指定备用系统,或者备用系统链不能够正确表示一个值,那么最终会降为十进制样式表示。

    symbols定义一个符号,用于标记的表示。符号可以包含字符串,图片或自定义的识别码。这个符号怎样构建标记呢?这依赖于system描述符里面所定义的算法。 举个例子,如果system的值是fixed,那么symbols属性指定的固定的N个符号,将被用来表示计数器的前N个值。用完了前N个符号后,列表里剩下的值将使用fallback定义的样式来表示。

    转载请保留页面地址:https://www.breakyizhan.com/css/32285.html
    原文地址:https://www.cnblogs.com/breakyizhan/p/13233368.html