CSS3计数器的使用-遁地龙卷风

结合::before实现自定义列表

body
{
　　counter-reset:dnf;
}
div::before
{
　　content:counter(dnf) ".";
　　counter-increment:dnf;
}
<body>
　　<div>dnf</div>
　　<div>dnf</div>
　　<div>dnf</div>
　　<div>dnf</div>
</body>
（1）
counter-reset:dnf会在解析到相应元素执行，body只有一个，所以只执行一次
重置、定义dnf计数器，默认0，可以指定默认值
counter-reset:dnf 10;
可以定义多个计数器
counter-reset:dnf 10 lol;

(2)

content:counter(dnf) ".";//1
counter-increment:dnf; //2
无论2语句在1前面还是在1后面都会优先执行，默认每次增长1，可自己指定
counter-increment:dnf 2;
1语句默认显示数字，还可以是其他list-style-type属性支持的任意值
content:counter(dnf,lower-alpha) ".";
小写英文字母a,b,c,d

CSS3计数器的使用-遁地龙卷风相关推荐

jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function(){alert(1);//1,3,5,7...},function(){a ...
JQuery data方法的使用-遁地龙卷风
(-1)说明我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本测试例子用到的showMessage ...
mysql输出学生和考试信息_mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风...
文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-----+----- ...
CSS3圆角边框的使用-遁地龙卷风
0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...
jQuery-H5-css3转盘抽奖-遁地龙卷风
(-1)写在前面这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...
java炫酷龙卷风源码_Java-使用二叉树实现快速排序-遁地龙卷风
(-1)写在前面在一次面试中被问及快速排序,回来后又看了一次以前做过的案例,说来惭愧,时至今日还需要读好长时间,才能明白自己代码的意思,主要是缺少注释和图解,深有感慨,决定好好记录一下. 之所以使用 ...
Jquery实现大于等于且小于等于-遁地龙卷风
jq 的slice方法能更好实现做合并单元格的功能,如下图所示为了达到上述效果,需要先获取包括起始行和结束行的tr $("tr:eq("+index_startTr+" ...
龙卷风java_程序设计-理解java继承-遁地龙卷风
(0)写在前面编程和现实世界是息息相关的,你是如何理解现实世界中的继承呢? 继承在编程中应理解为:对父类资源(本文只讨论方法)的使用,父类方法只提供类基本的功能,父类方法之间不存在调用关系. (1) ...
java 龙卷风_java8-lamba表达式的使用-遁地龙卷风
(-1)前言学习lamba表达式是十分重要的,你会发现java变的可爱多了. (0)函数式接口只有一个方法的接口称为函数式接口 JButton jButton = new JButton(&quo ...

CSS3计数器的使用-遁地龙卷风

CSS3计数器的使用-遁地龙卷风相关推荐

最新文章

热门文章