CSS计数器

来源：互联网发布：淘宝发货后找不到店铺编辑：程序博客网时间：2024/06/07 02:07

CSS计数器（counter）

CSS计数器属性

属性属性说明语法参数含义 counter-reset 定义计数器，包括初始化、作用域等 counter-reset:
[<identifier><integer>?]+/none/inherit 默认值为none
<identifier>:计数器名称
<integer>:计数器初始值
当元素的display为none时，该属性失效 counter-increment 设置计数器的增数 counter-increment:
[<user-ident><integer>?]+/none <user-ident>:需要增数的计数器名称
<integer>:计数器增数的值，可以为负数
可以同时增数多个计数器
当元素的display为none时，该属性失效 content 在::before和::after中生成内容 content:[<counter>]+
<counter>=
counter(name)/
counter(name,list-style-type)/
counters(name,string)/
counters(name,string，list-style-type) 使用计数器，需要结合::befer和::after使用。可以同时使用多个计数器 counter() 在content属性中使用，用来调用计数器 @counter-style 自定义列表样式 @counter-style counterStyleName{
system:算法;
range:使用范围;
symbols:符号;or additive-symbols:符号;
prefix:前缀;suffix:后缀;
pad:补零(eg.01,02,03);
nagative:负数策略;
fallback:出错后的默认值;
speakas:语音策略;} @counter-style cjk-heavenly-stem{
system:alphabetic;
symbols:”\7532”“\4E59”“\4E19”“\4E01”;
/* 甲乙丙丁 */
suffix:”、”;}

CSS计数器属性代码示例

属性代码代码解析 counter-reset counter-reset:counterA;
counter-reset:counterA 6
counter-reset:counterA 4 counterB;
counter-reset:counterA 4 counterB 2; 定义定时器counterA,初始值为默认值0
定义定时器counterA,初始值为6
定义定时器counterA、counterB,初始值分别为4和0
定义定时器counterA、counterB,初始值分别为4和2 counter-increment counter-increment:counterA
counter-increment:counterA 2
counter-increment:counterA 2 counterB -1
增数计算器counterA,每次增加1
增数计算器counterA,每次增加2
增数计算器counterA、counterB,每次分别增加2、-1 content content:”Fig.” counter(imgCounter);
content:”Fig.” counter(imgCounter,lower-alpha);
contents(section,”.”)”“;
contents(section,”.”,”lower-roman”)”“; 混合字符串和计数器imgCounter
指定计数器的列表格式
在计数器之间加上点号，同时在计数器最后添加一个空格
定义计数器为小写罗马数字格式，同时加点好，空格

CSS计数器应用

css counter
通过CSS计数器功能即实现上图左侧到右侧的效果。

    <ul class="title">        <li>一级标题            <ul class="title2">                <li>二级标题                    <ul>                        <li>三级标题</li>                        <li>三级标题</li>                        <li>三级标题</li>                    </ul>                </li>                <li>二级标题                    <ul>                        <li>三级标题</li>                        <li>三级标题</li>                        <li>三级标题</li>                    </ul>                </li>                <li>二级标题                    <ul>                        <li>三级标题</li>                        <li>三级标题</li>                        <li>三级标题</li>                    </ul>                </li>            </ul>        </li>        <li>一级标题            <ul class="title2">                <li>二级标题</li>                <li>二级标题</li>                <li>二级标题</li>            </ul>        </li>        <li>一级标题            <ul class="title2">                <li>二级标题</li>                <li>二级标题</li>                <li>二级标题</li>            </ul>        </li>    </ul>

    ul {        list-style: none;       }    .title {        counter-reset: A_title B_title C_title;        font-size: 18px;        font-weight: bold;        font-family: '宋体';    }    .title > li:before {        counter-increment: A_title ;        content: counter(A_title)"、";    }    .title .title2 > li {        font-size: 14px;        font-weight: 500;    }    .title .title2 > li:before {        counter-increment: B_title;        content: counter(A_title)"."counter(B_title)"、";    }    .title .title2 ul > li {        font-size: 10px;    }    .title .title2 ul > li:before {        counter-increment: C_title;        content: counter(A_title)"."counter(B_title)"."counter(C_title)"、";    }

阅读参考&扩展阅读

CSS计数器(序列数字字符自动递增)详解
使用CSS计数器
CSS Counter Styles Level 3
CSS计数器实现数值计算小游戏demo

0 0