最近看到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. 立体匹配：关于Middlebury提供的源码的简化使用

    Middlebury提供的源码,虽然花了不到一个小时就运行起来啦.但说实话,它那循环读取脚本命令来执行算法真是让我费了不少头脑,花了近三天时间,我才弄明白了它的运行机制.你说,我就想提取一下算法,你给 ...

  2. FreeMarker页面中获得contextPath

    要在ftl页面中使用contextPath,需要在viewResolver中做如下配置(红色部分): <bean id="viewResolver" class=" ...

  3. NYOJ 52-无聊的小明

    点击打开链接 无聊的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述       这天小明十分无聊,没有事做,但不甘于无聊的小明聪明的想到一个解决无聊的办法,因为他突 ...

  4. 编写javascript、Jquery的String.format();

    在javascript.Jquery里面好像是没有String.format();这个函数的,所以我们在拼接字符串的时候就特别的辛苦,生怕又打错,而且又乱,所以就自己去写一个函数来代替. String ...

  5. Object-oriented features

    Python is an object-oriented programing language, which means that it provides features that support ...

  6. 第4章 sed命令

    1 sed命令基本用法 sed(stream editor)是流编辑器,可对文本文件和标准输入进行编辑: sed只是对缓冲区中原始文件的副本进行编辑,并不编辑原始的文件,如果需要保存改动内容,可以选择 ...

  7. 酒鬼-DP

    Description Santo刚刚与房东打赌赢得了一间在New Clondike 的大客厅.今天,他来到这个大客厅欣赏他的奖品.房东摆出了一行瓶子在酒吧上.瓶子里都装有不同体积的酒.令Santo高 ...

  8. php array(object) 与xml相互转换

    private function _array_to_xml($source, $charset='utf-8'){ $array = json_decode($source); $pre = '&l ...

  9. (转)TextView属性大全

    TextView属性大全 今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符 ...

  10. Linux系统（X64）安装Oracle11g完整安装图文教程另附基本操作

    一:查看本地ssh服务 Linux系统下安装启动ssh服务,下面以CentOS版本Linux系统为例: 1.检查是否装了SSH包 rpm -qa |grep ssh 2.没有安装SSH直接YUM安装 ...