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中如何以图代字,找 ...
随机推荐
- IDEA快捷键笔记
Keymap:Mac OS X idea快速清除无用的引用:command+alt+o 跳转: 不同窗口之间的跳转(Next project window): alt + command + ] Pr ...
- OpenResty最佳实践
https://moonbingbing.gitbooks.io/openresty-best-practices/content/
- R语言字符串替换
R gsub Function gsub() function replaces all matches of a string, if the parameter is a string vecto ...
- Java容器有哪些?
网易面试: 问:Java容器有哪些,你聊一聊吧 Java容器: 数组,String,java.util下的集合容器 数组长度限制为 Integer.Integer.MAX_VALUE; String的 ...
- Python之重复执行
pip install retry 自动尝试5次,每次间隔2秒 from retry import retry @retry(tries=5, delay=2) def test(): print 1 ...
- (笔记)Mysql命令mysql：连接Mysql数据库
mysql命令用户连接数据库. mysql命令格式: mysql -h主机地址 -u用户名 -p用户密码 1) 连接到本机上的MYSQL首先打开DOS窗口,然后进入目录mysql\bin,再键入命令m ...
- Xianfeng轻量级Java中间件平台：用户管理
用户管理:简单地说,就是管理系统用户的账号信息.在典型的业务系统中,用户管理往往不包含用户隶属组织机构相关属性(比如部门.岗位等)的维护,而是由组织机构管理专门去维护.因此在用户管理的功能中,主要就维 ...
- Mac Terminal菜鸟篇之使用unrar解压rar文件
安装: $ brew install unrar 使用: $ unrar x Httpclient_jar.rar $ unrar e Httpclient_jar.rar # 或者用参数e也行
- ubuntu14.04_64位安装tensorflow-gpu
第一步(可直接跳到第二步):安装nvidia显卡驱动 linux用户可以通过官方ppa解决安装GPU驱动的问题.使用如下命令添加Graphic Drivers PPA: sudo add-apt-re ...
- 大内核锁 BKL
参考:http://blog.csdn.net/universus/article/details/5623971 ...