结合::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计数器的使用-遁地龙卷风的更多相关文章

  1. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

  2. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  3. 逻辑思维面试题-java后端面试-遁地龙卷风

    (-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...

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

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

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

    (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...

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

    (-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...

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

    0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...

  8. 不用媒体查询做web响应式设计-遁地龙卷风

    (0)写在前面 讲述知乎上看到的一篇文章中的一个案例,让我脑洞大开,佩服至极,特意第二天找到原文赞赏了 5元,原文地址https://zhuanlan.zhihu.com/p/27258076,案例用 ...

  9. HTML中的标记-遁地龙卷风

    第三版 上一版本在未经验证的情况下,盲目的认为很多东西是那样,造成错误,非常抱歉. 0.什么是标记 <input type="checkbox" checked />& ...

随机推荐

  1. IOS基础之 (设计模式)

    一 工厂方法 工厂方法方便我们快速创建类的实例的方法.通过工厂方法,可以让调用过程更加清晰. Person.h #import <Foundation/Foundation.h> @int ...

  2. SQL Server 2012 学习笔记3 增查改删

    现在举例几个"增查改删"的语句 select * from UserInfor --查找所有字段 select username,UserId from UserInfor -- ...

  3. VMWare12虚拟CentOS7共享文件的过程

    环境: 宿主机:Win10企业版,虚拟机:VMware pro12.5,虚拟OS:CentOS7.0 过程: VMware菜单:虚拟机->设置->选项,选中宿主机要共享的磁盘或目录,点击确 ...

  4. JSP传统标签开发

    1.标签技术的API类继承关系 1).JspTag接口是所有自定义标签的父接口 该接口中没有任何属性和方法,只有两个直接子接口,Tag接口和SimpleTag接口,把实现Tag接口的自定义标签叫做传统 ...

  5. Java数据结构——二叉树

    前序遍历——根 左 右 中序遍历——左 根 右 后序遍历——左 右 根 //================================================= // File Name ...

  6. netcat命令

    1 简介 netcat是网络工具中的瑞士军刀,它能通过TCP和UDP在网络中读写数据.通过与其他工具结合和重定向,你可以在脚本中以多种方式使用它.使用netcat命令所能完成的事情令人惊讶. netc ...

  7. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  8. XtraFinder在OSX10.11的使用

    重启系统,按住command键加上R键 进入恢复模式还是什么模式里,然后启动terminal 然后键入 csrutil enable --without debug 重启电脑,可正常使用 居然上传不了 ...

  9. 用淘宝ip地址库查ip

    这是一个通过调用淘宝ip地址库实现ip地址查询的功能类 using System; using System.Collections.Generic; using System.Linq; using ...

  10. owin

    app.Properties["Hello"] = System.DateTime.Now; app.Run(async context => await context.R ...