<!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的使用方法的更多相关文章

  1. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  2. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  3. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  4. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  5. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  6. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  7. CSS Counter Style试玩儿

    2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...

  8. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  9. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

随机推荐

  1. 服务器cpu过高修复：操作系统内核bug导致

    服务器cpu过高修复:操作系统内核bug导致修改系统内核参数/etc/sysctl.conf添加下面2条参数:vm.dirty_background_ratio=5vm.dirty_ratio=10

  2. RGB转灰度图的几种算法

    https://blog.csdn.net/cool1949/article/details/6649429 方法一:    对于彩色转灰度,有一个很著名的心理学公式: Gray = R*0.299 ...

  3. 什么是API网关？

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/lcx216/article/details/52913645 1.API网关介绍 API网关是一个服务 ...

  4. Java设计模式（6）桥模式（Bridge模式）

    Bridge定义:将抽象和行为划分开来,各自独立,但能动态的结合. 为什么使用桥模式 通常,当一个抽象类或接口有多个具体实现(concrete subclass),这些concrete之间关系可能有以 ...

  5. Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决

    1.问题描述: 该错误通常发生在应用函数读取excel文件(后缀xls或xlsx)时. 应用xlsread函数读取提示服务器出现意外情况: 应用importdata读取时提示can‘t open fi ...

  6. 为HTML5开发人员量身打造的7个Web框架

    HTML5规范开发完成时,将成为主流.据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万.毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的 ...

  7. html5和css3实现的3D滚动特效

    今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"&g ...

  8. ryu学习笔记（2） 之 ryu-manager运行报错

    http://blog.csdn.net/haimianxiaojie/article/details/48769653 ryu在使用的时候最常出现的报错是:address already in us ...

  9. install ubuntu on Android mobile phone

    Android 是基于Linux内核的开源操作系统,主要用在移动设备上.当然同样是基于Linux内核的操作系统,现在支持的Android的智能手机理论来说都能运行基于Linux的操作系统,比如现在流行 ...

  10. Mayi_Maven安装与配置Myeclipse、Idea

    一.需要准备的东西 1. JDK 2. Eclipse 3. Maven程序包 二.下载与安装 1. 前往https://maven.apache.org/download.cgi下载最新版的Mave ...