结合::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. python函数（五）

    函数 1.函数基本语法及特性 背景提要 现在老板让你写一个监控程序,监控服务器的系统状况,当cpu＼memory＼disk等指标的使用量超过阀值时即发邮件报警, 你掏空了所有的知识量,写出了以下代码 ...

  2. Linux 问题汇总

    centos主机发现大量的TIME_WAIT  解决方法: vim /etc/sysctl.conf #编辑文件,加入以下内容: net.ipv4.tcp_syncookies = 1 net.ipv ...

  3. 深入JVM-常用Java虚拟机参数

    一.跟踪调试参数 1.1 跟踪垃圾回收-读懂虚拟机日志 Java的一大特色就是支持自动的垃圾回收(GC),但是有时候,如果垃圾回收频繁出现,或者占用了太长的CPU时间,就不得不引起重视.此时,就需要一 ...

  4. 安装Virtual Box增强功能 - Ubuntu

    一.开发环境 操作系统:Windows 7Virtual Box 版本: 5.0.10 虚拟机系统: Ubuntu 12.04 LTS 二.问题 进入Ubuntu图形界面后,选择“设备” --> ...

  5. WinForm------GridControl控件中使用SearchLookUpEdit控件的方法

    1.在数据库添加两张表,拥有主外键关系 主键表: 外键表: 2.往工具栏里拖出GridCont控件,并增加相应的列,这里对"省份"进行修改,"FileName" ...

  6. C#----GDI+画图的一些注意和细节

    画线: 在矩形rect(0,0,20,20)中的位置Point(0,10),Point(20,10)画线,也就是在矩形的中间画线,线的宽度是20的话,会发现正好线会把矩形占满,说明画线不是向下或者向上 ...

  7. Ctrl+Scroll改变所有Editor的缩放比例 (Code::Blocks)

    Settings > Editor > Zooming resizes all editors

  8. Hermite Curve

    http://paulbourke.net/miscellaneous/interpolation/ http://fivedots.coe.psu.ac.th/Software.coe/Java%2 ...

  9. clipboard复制剪贴板功能，以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined

    zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面 ...

  10. ecshop 默认图处理

    function get_banner_path($img) { $img = empty($img) ? C('no_picture') : $img; return $img;}