当前位置: 首页 > Web前端 > CSS

content内容生成技术2

时间:2023-03-31 00:58:19 CSS

反效果是内容中最重要的。这个功能非常强大,实用,不可替代。甚至可以实现用js不容易实现的效果。在这里放慢脚步,细细品味。先来试试这个例子:.reset{counter-reset:w;}.counter:after{内容:counter(w);反增量:w;颜色:红色;内容计数器第一

第二
第三
所谓csscounter效果是指利用css代码实现随着元素数量的增加,数值也随之增加的效果。图中红色的阿拉伯数字是css计数器生成的。这是最基本的实现。css计数有几个key需要注意的地方:命名:必须有一个title(counter-reset)规则:是1,2,3,4还是1,2,1,2(counter-increment)start:否密码不执行(counter()/作者在counters())一书中有实现目录结构的例子:我是王小二
我是王小二的大儿子我是王小二的二儿子我是王小二二儿子的长孙我是王小二二儿子的二孙我是王小二二儿子的孙子我是王小二三儿子我是王小三我是王小四我是大儿子王小四的.reset{padding-left:20px;counter-reset:wangxiaoer;}.counter:before{content:counters(wangxiaoer,'-')'.';counter-increment:wangxiaoer;}.reset~.counter{color:#cd0000;}这里需要注意的是:一个容器中的counter-reset是唯一的。正确的应该是:我是王小二我是王小二的大儿子我是王小二的二儿子我是王小二二儿子的长孙我是王小二二儿子的二孙我是王小二二儿子的小孙我是王小三的三儿子我是王小三我是王小四我是王小四的大儿子reset和counter是嵌套关系,不是兄弟关系