CSS-列表或标题的多级计数

最新推荐文章于 2022-09-12 13:47:27 发布

转载最新推荐文章于 2022-09-12 13:47:27 发布 · 581 阅读

常用代码同时被 2 个专栏收录

43 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文介绍如何使用CSS实现标题和列表的多级计数，包括层级递增、计数器作用域及不同显示样式的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用css实现多级计数，比如1/1.1/1.1.1这种层层嵌套的计数，主要利用到counter-reset/counter-increment/counter/content/：before。

一、标题类多级计数，比如下面的效果：

CSS代码如下：

复制代码

body{
    counter-reset: chapter section subsec;
}
h1{
    counter-reset: section subsec;
}
h2{
    counter-reset: subsec;
}
h1:before{
    counter-increment: chapter;
    content: counter(chapter,cjk-ideographic)"、";
}
h2:before{
    counter-increment: section;
    content: counter(chapter)"."counter(section)" ";
}
h3:before{
    counter-increment: subsec;
    content: counter(chapter)"."counter(section)"."counter(subsec)" ";
}

复制代码

总结说明：

　　1、在每一级标题的上级（父元素），比如h1的上级为body，那么在body上重置body下的所有计数器，h2的上级为h1，在h1上重置h1子元素的所有计数器。

　　2、在每一层的:before伪类上递增该层计数器，比如h1的计数器为chapter，那么递增该计数器，可接受第二个参数表示步长，默认为1.

　　3、在每一层的:before伪类上利用content和counter（计数器）显示从h1到该层的计数器，使用“.”分隔，也可以使用其他的分隔符，比如空格或者“-”。

　　4、counter（计数器，type）第二个参数是list-style-type的关键字，默认为decimal。cjk-ideographic将显示为一二三这种形式。

二、嵌套的多级列表实现多级计数

形如以下的结构：

复制代码

    <ol>
        <li>绪论</li>
        <li>正文
            <ol>
                <li>正文一</li>
                <li>正文二</li>
                <li>正文三
                    <ol>
                        <li>正文三内容一</li>
                        <li>正文三内容二</li>
                        <li>正文三内容三</li>
                    </ol>
                </li>
                <li>正文四
                    <ol>
                        <li>正文四内容一</li>
                        <li>正文四内容二</li>
                        <li>正文四内容三</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>总结</li>
    </ol>

复制代码

正常显示如下：

如果为每个ol建一个类或者id，利用上面的方法也可以实现多级计数。但是有一种更快捷的方法。

CSS代码如下：

复制代码

ol{
    list-style: none;
    counter-reset: ordered;
}
li:before{
    counter-increment: ordered;
    content: counters(ordered,".")" ";
}

复制代码

效果如下：

总结说明：

　　1、根据CSS权威指南，计数器具有作用域的概念，每层嵌套都会为给定计数器创建一个新的作用域，即每层都创建了一个新的ordered实例。

　　2、counters（ordered，“.”）将把各作用域的ordered计数器串起来，以.相连。可接受第三个参数，为list-style-type关键字，每层显示样式都会变为关键字规定样式。

　　3、要为每层应用不同的关键字样式，可能还是需要用方法一。