CSS计数器

最新推荐文章于 2022-11-23 17:50:07 发布

Anyers

最新推荐文章于 2022-11-23 17:50:07 发布

阅读量597

点赞数

分类专栏： CSS Web前端文章标签： css

本文链接：https://blog.csdn.net/u012995964/article/details/51865154

版权

Web前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

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)"、";
    }