content 内容生成技术2

Posted 2020-12-07 baimeishaoxia

计数器效果可是说是content的重中之重, 此功能非常强大、实用, 且不具有可替代性, 甚至可以实现连js都不好实现的效果. 这个地方放慢节奏, 细细品味.
先来个例子体验一下:

.reset {
    counter-reset: w; 
}
.counter:after {
    content: counter(w);
    counter-increment: w;
    color: red;
}

<h4 class="reset">content 计数器</h4>
<div class="counter">第一个</div>
<div class="counter">第二个</div>
<div class="counter">第三个</div>

所谓css计数器效果, 指的是使用css代码实现随着元素数目增多, 数值也跟着变大的效果. 图中红色阿拉伯数字就是css计数器生成的, 这个是一个最基本的实现了.
css计数有这么几个关键点需要注意:

1. 命名: 要有个称呼(counter-reset)
2. 规则: 是1、2、3、4还是1、2、1、2呢(counter-increment)
3. 开始: 没有口令不执行(counter()/counters())

书中作者有个例子 目录结构的实现:

<div class="reset">
    <div class="counter">我是王小二</div>
    <div class="reset">
        <div class="counter">我是王小二的大儿子</div>
        <div class="counter">我是王小二的二儿子</div>
        <div class="reset">
            <div class="counter">我是王小二的二儿子的大孙子</div>
            <div class="counter">我是王小二的二儿子的二孙子</div>
            <div class="counter">我是王小二的二儿子的小孙子</div>
        </div>
        <div class="counter">我是王小二的三儿子</div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四</div>
    <div class="reset">
        <div class="counter">我是王小四的大儿子</div>
    </div>
</div>
.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, ‘-‘) ‘. ‘; 
  counter-increment: wangxiaoer;
}

.reset ~ .counter { 
    color: #cd0000; 
}

这里需要注意的是: 一个容器中普照源(counter-reset)是唯一的.
正确的应该是:

<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>

reset与counter是嵌套关系 而不是同级关系