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中如何以图代字,找 ...
随机推荐
- 微信扫码支付.net版本
微信扫码支付有两个坑 1.模式一已经过时,不能使用了 2.HttpService类的POST 和 GET方法内的 //设置代理WebProxy proxy = new WebProxy();proxy ...
- 在Ubuntu 14.04 64bit上安装Markdown和绘图软件Haroopad
简介 Haroopad:一款让你欲罢不能的Markdown编辑器 身为大程序员,我本来是不需要 Markdown 编辑器的,但是 Haroopad 让我简直欲罢不能,不能再爱更多.跨平台,代码高亮,V ...
- js判断类型的方法
//判断类型 var arr=[]; Object.prototype.toString.call(arr)=='[object Array]' //判断是否是包含关系 function elCont ...
- Linux Makefile简单模板
########################################### #Makefile for simple programs ########################## ...
- How to revert your file&folder by "FOUND.000"
当你在硬盘分区间复制很多文件时,当你使用下载软件时,当你用Word写作时,如果忽然遇见停电.Windows失去响应或者系统自动重新启动,在看着屏幕一黑的瞬间你会有何感受?只能希望在重新启动以后重要的文 ...
- 自然语言交流系统 phxnet团队 创新实训 项目博客 （六）
从你进入软件开始,你就建立了和服务器的联系.这是一段和服务器的长连接,直到你退出此软件. 2D文字聊天界面大致实现了文字输入.发送消息.接收消息.你可以通过点击按钮让机器人开启聊天模式或者学习模式.又 ...
- MYSQL数据库从A表把数据插入B表
如果2张表的字段一致,并且希望插入全部数据,可以用这种方法: Code: INSERT INTO 目标表 SELECT * FROM 来源表; 比如要将 articles 表插入到 newArticl ...
- Mac 系统上安装Protocol buffer
1. cd /Software/protobuf-2.5.0 2.sudo ./configure --prefix=$/Software/protobuf-2.5.0 3.sudo make 4.s ...
- 【转】【Python】Python网络编程
Socket简介 在网络上的两个程序通过一个双向的通信连接实现数据的交换,这个链接的一端称为一个Socket(套接字),用于描述IP地址和端口. 建立网络通信连接至少要一对端口号(Socket),So ...
- OpenGL基本框架与三维对象绘制
上次我们介绍了OpenGL的环境构建和二维对象的绘制,这次我们来讲讲三维对象的绘制: 绘制代码如下: Github代码仓库 // opengltest2.cpp : Defines the entry ...