最近看到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. delphi SPCOMM 接收数据不完整！该如何解决

    SPCOMM 接收数据不完整!该如何解决   SPCOMM 接收数据不完整!我作了一个 读取地磅数据的程序,是用spcomm接收的! 总共有五台地磅,其他4台地磅数据读取都正常.但是有一台接收数据的时 ...

  2. ubuntu 命令行软件包管理

    安装软件包 apt-get install vim 卸载 apt-get remove/autoremove vim autoremove 会顺便卸载未使用,未被依赖的软件包 查询或者搜索软件包:: ...

  3. python函数 位置参数，关键字参数，可变参数优先级

    def fun(arg,args=1,*arg,**keywords): python 一共有这四类参数,第一类最常见,不用多说,第二类,关键字参数,python能通过关键字找到参数,python函数 ...

  4. cmd中目录的变更

    1.在同一个盘符下的目录的切换使用cd加空格加子目录进行切换 2.在不同的盘符下进行切换直接使用在当前目录后面加上其他盘符的名称即可

  5. 日期：Date

    API--- java.util.Date:日期类,月份从0-11: 日期对象和毫秒值之间的转换. 1,日期对象转成毫秒值.Date类中的getTime方法. 2,如何将获取到的毫秒值转成具体的日期呢 ...

  6. cocos2d-lua 3.5 ios搭建步骤

    xcode搭建cocos2d-lua是最简单的,不用 配置一系列环境变量,只把xcode安装好就可以 步骤一:去官网下载quick-3.5,然后打开命令行工具 步骤二:cd进入/Users/song/ ...

  7. 下载和编译 Open XML SDK

    我们需要一些工具来开始 Open XML 的开发. 开发工具 推荐的开发工具是 Visual Studio 社区版. 开发工具:Visual Studio Community 2013 下载地址:ht ...

  8. IIS安全工具UrlScan介绍 ASP.NET 两种超强SQL 注入免费解决方案( 基于IIS,使用免费工具) 批改或隐藏IIS7.5的Server头信息 移除X-Powered-By,MVC,ASP.NET_SessionId 的 HTTP头或者cookie名称

    微软给了我们一个很好的工具用来使IIS安全的运行-------UrlScan,下面是它的配置文件介绍 [options]UseAllowVerbs=1                ; 若为1,则使用 ...

  9. TestCase--网站登录模块

    以京东的登录页面为例 测试用例设计如下: 一.功能测试 1. 什么都不输入,点击登录按钮,系统是否给出提示2. 输入正确的用户名和密码,点击登录按钮,验证是否能正确登录3. 输入错误的用户名.正确的密 ...

  10. easyui combo下拉框多选框

    按照自己的方式,先晒下效果图: 选一个值,那么就在input里面显示一个,去掉勾选,那么input就会少一个 其实做法很简单,今天就是快下班了,闲着没事加篇博客而已,下面带上代码. 1.页面的展示,i ...