欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《CSS世界》第四章学习心得——深入理解content(下)

程序员文章站 2024-03-24 15:35:10
...

countent计数器

1 counter-reset:设置某个选择器出现次数的计数器的值,默认值是0,chrome下可以取小数,任何小数向下取整;

多个以空格分隔,而不是逗号

{
  counter-reset:section1 2 section2 3;
}

2 counter-increment:计数器递增的值,默认为1。

使用content:counter(...)会默认先执行一次counter-increment+counter-reset,所以content默认情况下显示的就是1。

3 counter()和counters()是方法而不是属性,作用就是显示计数。

4 counters(name,string)可以实现计数嵌套

<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 { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
} 

结果:

《CSS世界》第四章学习心得——深入理解content(下)

相关标签: css css世界