找回密码
当前位置：前端开发者 > CSS > 正文

前端开发纯CSS计数器 自动编序号

2019-01-20 分类：CSS 阅读(1366) 评论(0)
web前端开发技术 html
前端开发技术发展方向
前端开发技术难题

counter-reset 、counter-increment。自动编号。
设置某个选择器出现次数的计数器的值、计数器增量。
1.counter-reset
定义和用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.counterReset=”subsection”

2.counter-increment
定义和用法： counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
说明：利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
注释：如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.counterIncrement=”subsection”

附实例如下：
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>counter-reset counter-increment</title>
    </head>
    <body>
        <h1 style=”padding-left: 30px;”>使用示例</h1>
        <div class=”livenum”>
            <div class=”liveText”>我是第一</div>
            <div class=”liveText”>我是第2</div>
            <div class=”liveText”>我是第3</div>
            <div class=”liveText”>我是第4</div>
            <div class=”liveText”>我是第5</div>
        </div>
        <style>
            .livenum {
                counter-reset: num;
                padding-left: 60px;
                padding-top: 10px;
            }
            .liveText {
                position: relative;
                margin: 0 0 10px 34px;
            }
            .liveText:before {
                content: counter(num);
                counter-increment: num;
                position: absolute;
                left: -32px;
                width: 20px;
                height: 20px;
                font-size: 12px;
                text-align: center;
                border-radius: 50%;
                border: 1px solid #575757;
            }
        </style>
        <br />
        <br />
        <h1 style=”padding-left: 30px;”>进阶 嵌套使用</h1>
        <br />
        <div class=”section”>
            <h1>我是第一章节</h1>
            <h2>dfsdfsdf</h2>
            <h2>gtyergseg</h2>
            <h2>gtyergseg</h2>
            <h1>我是第二章节</h1>
            <h2>gtyergseg</h2>
            <h1>我是第三章节</h1>
            <h2>gtyergseg</h2>
            <h1>我是第四章节</h1>
            <h2>gtyergseg</h2>
            <h2>gtyergseg</h2>
            <h1>我是第五章节</h1>
            <h2>gtyergseg</h2>
        </div>
        <style type=”text/css”>
            .section {
                counter-reset: section;
                padding-left: 60px;
            }
            .section h1 {
                counter-reset: subsection;
                font-size: 22px;
            }
            .section h1:before {
                content: ‘section’ counter(section) ‘. ‘;
                counter-increment: section;
            }
            .section h2 {
                font-weight: 400;
                font-size: 16px;
                padding-left: 2em;
            }
            .section h2:before {
                counter-increment: subsection;
                content: counter(section) ‘.’ counter(subsection) ‘ ‘;
            }
        </style>
    </body>
</html>
web前端跨平台开发技术
web前端开发技术布局
web前端开发技术复习
赞(0)
前端开发者 » 前端开发纯CSS计数器 自动编序号
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论