最近看到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. C# String.Format大全 去 decimal 后面的 0

    转 http://kwon.iteye.com/blog/1068255  http://blog.csdn.net/tvvbbb/article/details/47256943 public st ...

  2. 向sqlserver插入二进制数据(比如图片)

    sqlserver插入二进制数据 偶然在sqlteam看到了,真是够绝,这都想得出来,很便捷的一个方式(只适用于SQL SERVER 2005+),代码如下: CREATE TABLE myTable ...

  3. poj 1016 Numbers That Count

    点击打开链接 Numbers That Count Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17922   Accep ...

  4. HashCode equals

    HashCode: hashcode就是一个签名.当两个对象的hashcode一样时,两个对象就有可能一样.如果不一样的话两个对象就肯定不一样.一般用hashcode来进行比较两个东西是不是一样的,可 ...

  5. 一个构建XML对象的js库

    初学javascript,学习中用到在IE中建立XML对象,于是写了一个简单的“库”.因为水平所限,肯定会有不恰当的地方,欢迎指正. 如果大家有知道现存的更好的东西,非常希望大家能将它推荐给我. 代码 ...

  6. ibatis cannot find <sql> pattern

    "Could not find SQL statement to include with refid xxx"A: 认真把每个用到xxx的地方都看一遍

  7. junit适配器模式应用

    适配器模式 定义: 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作: 构成: 目标抽象角色(Target):定义客户要用的特定领 ...

  8. canvas-7globleCompositeOperation2.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. spark1.4的本地模式编程练习（1）

    spark编程练习 申明:以下代码仅作学习参考使用,勿使用在商业用途. Wordcount UserMining TweetMining HashtagMining InvertedIndex Tes ...

  10. 计数排序（Count Sort ）与插入排序（Insert Sort）

    计数排序法:计数数组适用于当前数组密集的情况.例如(2,3,5,4,2,3,3,2,5,4) 方法:先找出最大值最小值,之后统计每个数出现的次数,根据次数从小到大往数组里添加 计数排序法是一种不需要比 ...