CSS计数器(自定义列表)Demo

Posted xiaobaizhiqian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS计数器(自定义列表)Demo相关的知识,希望对你有一定的参考价值。

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/begin.css"/>
    </head>
    <body>
        <section>
            <h2>登记个人信息</h2>
            <ol>
                <li>课程进度推进通知</li>
                <li>即时沟通
                    <ol>
                        <li>QQ</li>
                        <li>微信</li>
                    </ol>
                </li>
                <li>快递收件地址</li>
            </ol>
        </section>
        <section>
            <h2>熟悉课程出品流程</h2>
            <figure>
                课程出品流程
            </figure>
        </section>
        <section>
            <h2>观看在线示例课程</h2>
            <figure>
                Dart语言开发
            </figure>
            <figure>
                Docker知识体系
            </figure>
        </section>
    </body>
</html>

css

body {
    background-color: #eee;
    color: #666;
    counter-reset: xiaobaizhiqian;
}
section {
    width: 800px;
    margin: 0 auto 20px auto;
    background-color: #fff;
    padding: 10px 20px 20px 20px;
    position: relative;
    overflow: hidden;
    counter-increment: xiaobaizhiqian;
    counter-reset: xiaobaizhiqian-pic;
}
section p {
    line-height: 1.5;
}
figure::before,li::before,section:before{
    font-weight: bold;
    color: #FF5C00;
}
section:before {
    content: "「新手任务-"counter(xiaobaizhiqian)"」";
    background-color: #35B558;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px 20px;
}
@-moz-document url-prefix() {
    section:before{
        content: "「新手任务-"counter(xiaobaizhiqian,simp-chinese-formal)"」";
    }
}
section h2 {
    position: relative;
    top: -20px;
    left: 168px;
}
ol {
    list-style: none;
    counter-reset: xiaobaizhiqian-li;
}
li::before {
    counter-increment: xiaobaizhiqian-li;
    content:counters(xiaobaizhiqian-li,".")":";
}
figure {
    padding: 0;
    margin: 0 20px 20px 0;
    display: inline-block;
}
figure::before {
    counter-increment: xiaobaizhiqian-pic;
    content: "图"counter(xiaobaizhiqian-pic,lower-roman);
}

 注意:要将计数器应用在哪个元素上,就在其父元素定义计数器,如果并列有多个元素,那么在这几个元素共同的父元素定义计数器,如本例中有多个section,如果需要每个section都使用计数器,那么就需要将计数器定义在body上;再举个例,本例中给figure标签使用计数器,将计数器定义在了section标签中,离开了section标签后,figure标签计数器便会重新从1开始,如果要使其连贯,则将计数器定义在body中即可

在section中定义计数器

技术分享图片

 在body中定义计数器

技术分享图片

 

以上是关于CSS计数器(自定义列表)Demo的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

Visual Studio 自定义代码片段在方法定义的参数列表中不起作用