《CSS计数器(序列数字字符自动递增)详解》
2016-04-20 16:47
459 查看
原文链接:https://www.geek-share.com/detail/2672081765.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>content-increment</title> <style> .test li {margin:16px 0;padding:0;list-style:none;} .test li li:before{color:#f00;font-family:'Microsoft YaHei';} .counter1 li{counter-increment:testname;} .counter1 li:before{content:counter(testname)".";} .counter2 li{counter-increment:testname2 2;} .counter2 li:before{content:counter(testname2)"/";} .counter3 li{counter-increment:testname3 -1;} .counter3 li:before{content:counter(testname3)")";} .counter4 li{counter-increment:testname4;} .counter4 li:before{content:counter(testname4, upper-roman)". ";} .counter5 {counter-reset:testname5;} .counter5 li:before{content: counters(testname5, '-') '. '; counter-increment: testname5;color:blue;font-family: 'Microsoft YaHei';} </style> </head> <body> <ul class="test"> <li class="counter1"> <strong>默认时的计数器:</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> <li class="counter2"> <strong>修改计数器每次增加的值为2:</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> <li class="counter3"> <strong>修改计数器每次增加的值为-1:</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> <li class="counter4"> <strong>修改计数器以罗马字符显示:</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> </ul> <ul class="test counter5"> <strong>计数器以嵌套计数显示:</strong> <li>父级</li> <li>父级 <ul class="counter5"> <li>子级1</li> <li>子级2</li> <li>子级3</li> </ul> </li> <li>父级 <ul class="counter5"> <li>子级1</li> <li>子级2</li> <li>子级3</li> </ul> </li> <li>父级</li> </ul> </body> </html>
转载于:https://www.geek-share.com/detail/2672081765.html
相关文章推荐
- CSS计数器(序列数字字符自动递增)详解
- 《CSS计数器(序列数字字符自动递增)详解》
- css解决英文字符与阿伯数字自动换行
- css解决英文字符与阿位伯数字自动换行
- 往数据表中插入 "字段名 字符串" , 对于非字符字段,采用 "递增整形数字" 代替(日期字段会自动转变为对应日期)
- 自动换行问题,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现换行的方法
- css 解决英文字符与阿位伯数字自动换行
- CSS counter计数器(content目录序号自动递增)详解
- css解决英文字符与阿位伯数字自动换行
- css解决英文字符与阿伯数字自动换行
- JS判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
- Python and django(四)--详解python中的数字和序列
- 产生n位数序列如果不够n位的数字前边用0补齐,通过 bash而且不用循环,直接产生n个相同的字符组成的字符串
- 最长递增子序列 编辑距离问题 青蛙过桥 寻宝路线 回文串问题 租用游艇问题 数字三角形 至多删三个字符
- javascript自动生成包含数字与字符的随机字符串
- python学习笔记 --- python中使用哈希方法处理字符与数字,ord()等函数详解
- 单调递增最长子序列。(详解)
- CSS代码使纯英文数字自动换行
- 用css控制连续英文字符或数字换行
- CSS实现连续数字和英文的自动换行