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

时间: 2024-08-03 23:32:50

CSS3计数器的使用-遁地龙卷风的相关文章

CSS3过渡详解-遁地龙卷风

0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -moz- Firefox -ms- IE (2) css p { height:15px;/*类似于高度这种属性,必须明确指定值*/ } p:hover/*初始p:hover*/ { height:100px; } (3)html文件body部分 <p></p> 1.快速使用 将下面属性加入初始p

JQuery data方法的使用-遁地龙卷风

(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage方法如下 showMessage.i = 0; function showMessage(object) { var body = $("body")[0]; var $p =$("#debugp"); if($p.length==0) { $p = $("&

JQuery simpleModal插件的使用-遁地龙卷风

(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js  1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻烦,比如名子一样但内容不一样,说多了都是泪啊 (1)快速入手 导入顺序 <script type="text/javascript" src="jquery-1.8.3.js

css3径向渐变详解-遁地龙卷风

(-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及…,这篇是为后续做准备. (0)快速使用 background-image:-webkit-linear-gradient(red,blue); 或者 background-image: -webkit-gradient(linear,center top,center bottom,from(#ace),to(#f96)); (1)环境准备 #lol { width:30

CSS3圆角边框的使用-遁地龙卷风

0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50%; 这里的%号是已应用该css样式元素的长度和宽度为基数的 border-radius:50%  30%  ; 上下,水平垂直是50% 左右,水平垂直是30% border-radius:50%  30%  10%; 上,水平垂直是50%,左右,水平垂直是30%,下,水平垂直是10% border

面向过程与面向对象的区别-遁地龙卷风

下面例子根据C和Java编写 面向过程与面向对象之间的区别在于认知世界的方式,后者在前者的基础上提供了更高的抽象层次-类. 也就是抽象.封装.继承.多态. 举个例子 输出 小明20岁<=>A,小明打篮球<=>B. 面向过程相当于在类中调用main方法输出A.B public class Test { public static void main( String[] args ) { System.out.println( "小明去上学" ); System.o

CSS伪选择器的使用-遁地龙卷风

分为伪元素选择器和伪类选择器两种,前者两个冒号,后者一个冒号,但是浏览器都看做一个冒号 1.a.::first-line 逐层匹配,直到有文本元素且结束改行为止 设置css属性word-break:break-all.文本长度超出元素的例子就不说了 body::first-line { color:red; } (1)<body> <p id="lol"> <span><i>123</i><br/><i>

MyBatis框架在控制台打印Sql语句-遁地龙卷风

(-1)写在前面 我用的是MyBatis 3.2.4,Maven Project (0)mybatis-config.xml <settings> <setting name="logImpl" value="LOG4J"/> </settings> (1)log4j.properties 内容 log4j.rootLogger=DEBUG, Console log4j.appender.Console=org.apache.lo

java抽象-老师的生日-逻辑思维-有趣的面试题-遁地龙卷风

(-1)写在前面 都快去北京了,硬生生的安排一场java考试,对于那些特别细节的东西我忘了吧也不觉得有什么不好,以前都记得,也都见过,只不过平时不常用连接断了,但是你死记硬背是没用的,一段时间后还是会忘,唯一的途径就是多做东西,理论联系实际,相反这道题我感觉很有意思,也在网上看到了很多解释,觉得都有所不足,下面是我给出的答案. (0)详细解释 设一个老师的生日为M月N日.把M告诉学生甲(即学生甲知道老师出生的月份),把N告诉学生乙(即学生乙知道老师出生的日).现有如下日期是公开的:3月4日,3月