css counter的使用方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
/*新建一个计数*/
counter-reset: aaa;
}
h1 {
/*计数增加*/
counter-increment: aaa;
/*子计数*/
counter-reset: bbb;
}
h1::before {
content: counter(aaa) "-";
}
h2 {
counter-increment: bbb;
}
h2::before {
content: counter(aaa) "." counter(bbb) "-";
}
</style>
</head>
<body>
<div class="wrap">
<h1>这是一个一级标题</h1>
<p>这是一个段落</p> <h1>这是一个一级标题</h1>
<p>这是一个段落</p> <h2>这是一个二级标题</h2>
<p>这是一个段落</p> <h2>这是一个二级标题</h2>
<p>这是一个段落</p> </div>
</body>
</html>
参数说明：
counter-reset: 重置或新建一个计数，该属性的值是你自定义的计数名。
counter-increment: 让计数的数值增加，这个属性的值是你想要让数值增加的计数的名字。
content: 使用 :before 以伪元素的方式给元素前添加计数数字，计数的值通过counter()获取。
css counter的使用方法的更多相关文章
- 为IE单独写CSS的三种方法
本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- CSS模糊效果及其兼容方法
今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...
- CSS Counter Style试玩儿
2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...
随机推荐
- Web API设计方法论
英文原文:A Web API Design Methodology 为Web设计.实现和维护API不仅仅是一项挑战:对很多公司来说,这是一项势在必行的任务.本系列将带领读者走过一段旅程,从为API确定 ...
- PHP 调试利器之 PHPDBG
简介 PHPDBG是一个PHP的SAPI模块,可以在不用修改代码和不影响性能的情况下控制PHP的运行环境. PHPDBG的目标是成为一个轻量级.强大.易用的PHP调试平台.可以在PHP5.4和之上版本 ...
- 定制应用Repeater 、ListView的模版
若干年前有个需求:客户可在管理后台给每个新闻内容栏目指定新闻的显示样式,有的可以显示新闻时间,有的则不需要.于是就有了动态模版的应用.记得当时是用 LoadControl 的方式然后 Controls ...
- javascript 学习记录
关于牛B的Jquery源头 (function(){ //这里省略jQuery所有实现 })(); :无论你怎么去定义你的函数 JS解释器都会把它翻译成一个 Function对象 :那什么是Funct ...
- Linux中通过/proc/stat等文件计算Cpu使用率
Linux平台Cpu使用率的计算 proc文件系统 /proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为内核与进程提供通信的接口.用户和应用程序可以通过/pro ...
- 相似变换 SimilarityTransform 以及skimage源码
http://scikit-image.org/docs/dev/api/skimage.transform.html#skimage.transform.SimilarityTransform ht ...
- Quick solution to java.lang.NoClassDefFoundError: org/openqa/selenium/HasInputDevices error
In case if you face this problem, one of the possible solutions that will work for you is to make su ...
- hash模块 hashlib不可逆加密 和 base64算法加密解密
hashlib模块 用于加密相关的操作,代替md5模块和sha模块,主要提供SHA1,SHA224,SSHA256,SHA384,SHA512,MD5算法 直接看代码案例: ---------md5- ...
- Linux中./configure、make、make install详解
./configure && make && make install详解 2010-08-03 23:30:05 标签:休闲 ./configure &&a ...
- 全新升级的WiFi无线上网短信认证系统，适用于咖啡厅、足浴等公共场所，提高门门店营业收入
WiFi无线上网短信认证系统经历从1.0到1.88的升级,都是用户在使用过程中,提出宝贵的意见,一直修复至今,有着非常稳定的版本. 这个软件有什么作用?WiFi为什么要认证呢? 其实这个只是获取用户联 ...