最近看到counter属性，好奇是做什么用的，于是去查了查。

1.简单介绍

counter是为css中插入计数器。【注明】在CSS2.1中counter()只能被使用在content属性上。
关于浏览器兼容性可以看[这里]

2.counter的作用

实际上是代替了javascript作为一种计数器工具，在css中使用。元素出现了几次就默认增加多少对应值。增加值大小还可以由自己设置。

可以想象当我们设置好一次规矩之后，以后无论添加多少标签，计数工具自动帮我们算计数，不必手动输入那些值。而且这些不必借助javascript，这是件多么美妙的事情。

3.自我小例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3中 counter-increment counter-reset属性</title>

    <style type="text/css">

        body

        {

            counter-reset:section;

        }

        h1

        {

            counter-reset:subsection;

        }

        h1:before

        {

            content:"Section " counter(section) ". ";

            counter-increment:section;

        }

        h2:before

        {

            counter-increment:subsection;

            content:counter(section) "." counter(subsection) " ";

        }

        h2{

            counter-reset:subsubsection;

        }

        h3:before{

            counter-increment: subsubsection;

            content: counter(section) "." counter(subsection) "." counter(subsubsection) " " ;

        }

        h3{

            counter-reset: subxsection;

        }

        h4:before{

            counter-increment: subxsection;

            content: counter(section) "." counter(subsection) "." counter(subsubsection) "." counter(subxsection);

        }

    </style>

</head>

<body>

    <h1>上衣</h1>

    <h2>T恤</h2>

    <h2>衬衫</h2>

    <h3>polo衫</h3>

    <h1>裤子</h1>

    <h2>牛仔裤</h2>

    <h2>休闲裤</h2>

    <h2>七分裤</h2>

    <h3>按材质分</h3>

    <h3>按牌子分</h3>

    <h4>美特斯邦威</h4>

    <h4>杰克琼斯</h4>

    <h4>里维斯</h4>

    <h4>优衣库</h4>

</body>

</html>

初识 css3中counter属性的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  3. css3中content属性的应用

    可以使用css3中content功能为html元素增减内容.content需要配合 E:before和E:after使用. 废话少说,看代码和效果说明: 第一种: css代码: #div1:befor ...

  4. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  5. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  6. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  7. css3中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  8. 谈谈CSS3中display属性的Flex布局（弹性布局）

    最近为了微信小程序,回忆起之前有接触过的弹性布局(display:Flex) 网上摘录的原文地址:https://www.cnblogs.com/xuyuntao/articles/6391728.h ...

  9. 渐进增强与优雅降级 && css3中普通属性和前缀属性的书写顺序

     什么是渐进增强与优雅降级? 服务器和浏览器是不同的.当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可:但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新 ...

随机推荐

  1. Gradle多渠道打包[umeng]

    前言 国内Android应用市场品种太多,血统不纯,每次上线App都打包打到手软,上传上到吐血!好在我们有了Android studio和gradle,一条命令打包各种渠道版本App! 正文 Umen ...

  2. 算法库：jpeglib和pnglib安装配置

    类似于OpenCV的安装配置.只不过OpenCV有编译好的,而jpeglib和pnglib需要自己编译.其实,若要跟踪OpenCV的源码或要使用OpenCV的扩展包,OpenCV也得自己编译. Ope ...

  3. [POJ 2586] Y2K Accounting Bug （贪心）

    题目链接:http://poj.org/problem?id=2586 题目大意:(真难读懂啊)给你两个数,s,d,意思是MS公司每个月可能赚钱,也可能赔钱,如果赚钱的话,就是赚s元,如果赔钱的话,就 ...

  4. Linux平台块设备到字符设备（裸设备）的三种映射方式(转载)

    在Linux平台oracle rac的组建过程中,如果使用ASM+RAW的存储方式的话,由于asm不支持块设备,支持持字符访问设备,所以需要配置将Block Device Drive转变成Charac ...

  5. 共享池之八：软解析、硬解析、软软解析 详解一条SQL在library cache中解析涉及的锁

    先来张大图: 结合上图来说明一下解析的各个步骤涉及的锁. 软解析.硬解析.软软解析区别的简单说明: 为了将用户写的sql文本转化为oracle认识的且可执行的语句,这个过程就叫做解析过程. 解析分为硬 ...

  6. Android——主流分辨率

    VGA:480*640 QVGA:240*320 HVGA:320*480 WVGA:480*800 FWVGA:480*854 IntelHaxm.exe  模拟器加速器

  7. 用js控制选项卡的隐藏与显示

    通过使用ul和div来,借助于jquery来实现选项卡的显示与隐藏 <form action="" method="post"> <div&g ...

  8. OpenGL ES学习笔记（一）——基本用法、绘制流程与着色器编译

    首先声明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. 在Android.iOS等移动平台上 ...

  9. 站点发布到 IIS 后，System.Data.SqlLite.dll　末找到

    近来在部署一个站点到客户的服务器 IIS 上时,打开后却出现一个错误的页面,系统提示System.Data.SqlLite.dll 末找到,在站点部署到客户的服务器之前时,在本地测试,却没有发现什么异 ...

  10. 洛谷P2736 “破锣摇滚”乐队 Raucous Rockers

    P2736 "破锣摇滚"乐队 Raucous Rockers 21通过 52提交 题目提供者该用户不存在 标签USACO 难度普及+/提高 提交  讨论  题解 最新讨论 暂时没有 ...