CSS代码(三):巧用counter实现文档的多级编号
来源:互联网 发布:淘宝发货显示其他物流 编辑:程序博客网 时间:2024/05/16 19:47
在多级编号功能的实现过程中,我们一般采用JS动态递增的方式,或者采用后端编码的方式,然而还有一种更简单的实现方式,用CSS即可轻松实现。
如果需要展示的层次结构如下:
<ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 2.1 --> <li>item</li> <!-- 2.2 --> <li>item <!-- 2.3 --> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> </ol> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --></ol>
只需要添加如下的样式,即可轻松实现文档的多级自动编号:
ol { /* 开始计数 */ counter-reset: section; list-style-type: none;}li::before { counter-increment: section; content: counters(section,".") " "; }
最后的界面效果如下所示:
结论
熟练使用CSS,能减少很多无谓的JS代码,并且维护的工作量远远小于JS代码实现,可更改性也可以更上一个层次。
阅读全文
0 0
- CSS代码(三):巧用counter实现文档的多级编号
- 利用CSS计数函数counter()和counters()实现自动计数编号
- Word2010中插入多级列表编号的三种方法
- Word2010中插入多级列表编号的三种方法
- word实现多级编号绑定
- word中如何实现多级编号的自动生成?
- css的counter-increment和counter-reset
- Python Counter() 的实现
- css实现多级菜单
- 按tab不能实现多级编号
- 【Word】Word2010中插入多级列表编号的三种方法
- CSS -Counter
- CSS代码(二):巧用content实现文档的防拷贝功能
- 纯css实现多级菜单
- Word2010中如何设置多级编号 把默认标题的样式设置为带有多级编号
- CSS实现行编号效果
- word2003多级编号
- word多级编号
- Quartz2D和CoreGraphic的关系
- UVA
- Ubuntu17.04安装各种软件过程中出现的问题和一些小技巧
- crontab下执行设置壁纸出错问题
- APP启动流程
- CSS代码(三):巧用counter实现文档的多级编号
- NP完全性
- java基础巩固之-线程
- 随机产生20个字符串并且字符串不能重复 且进行排序
- 认识债券
- ios开发之UI基础
- 资产抵押债券
- iOS 分享功能之图片压缩(微信好友-朋友圈)
- js时钟