最近看到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. ubuntu 14.10 安装 zabbix

    在ubuntu 14.10 上部署 zabbix 2.x 基本软件包安装 既然是ubuntu系统,当然要用好apt-get神器. 参考教程 URL:http://blog.csdn.net/cloud ...

  2. SQLAlchemy指南(tutorial)

    对应版本: 0.3.4 目录 1 安装 1.1 安装SQLAlchemy 1.2 安装一个数据库API 2 快速开始 2.1 导入 2.2 连接到数据库 3 SQLAlchemy是两个库的包装 4 操 ...

  3. unix环境C编程之日期时间转换

    1.理清概念 1.1.日历时间:   含义:国际标准时间1970年1月1日00:00:00以来经过的秒数.   数据类型:time_t.实际上是long的别名. 1.2.tm结构时间:   含义:结构 ...

  4. SQL Server设置主键自增长列

    1.新建一数据表,里面有字段id,将id设为为主键 create table tb(id int,constraint pkid primary key (id)) create table tb(i ...

  5. JNI_Android项目中调用.so动态库实现详解【转】

    转自 http://www.cnblogs.com/sevenyuan/p/4202759.html 1. 在Eclipse中创建项目:TestJNI 2. 新创建一个class:TestJNI.ja ...

  6. 技术转载：Jni学习四：如何编写jni方法

    转载:http://blog.chinaunix.net/u1/38994/showart_1099528.html 一.概述: 在这篇文章中将会简单介绍如何编制一些简单的JNI 方法.我们都知道JN ...

  7. SQL必知必会笔记（1）

    去SQL AXDB 中Query数据 Open the SQL > Connect > Select AXDB > new Query select REFID, ITEMID, R ...

  8. jmeter随笔（9）--有两种编码风格，导致数据乱码

    问题:在一个网站,有两种编码风格,导致数据乱码 解决办法: 1.首先设置jmeter的配置文件 2.针对要求是utf-8格式的这样的请求,做单独的编码处理(beanshell处理) 3.运行,在htm ...

  9. Spring Boot 内嵌Tomcat的端口号的修改

    操作非常的简单,不过如果从来没有操作过,也是需要查找一下资料的,所以,在此我简单的记录一下自己的操作步骤以备后用! 1:我的Eclipse版本,不同的开发工具可能有所差异,不过大同小异 2:如何进入对 ...

  10. noip2009 潜伏者

    P1071 潜伏者 827通过 2.2K提交 题目提供者洛谷OnlineJudge 标签字符串模拟2009NOIp提高组 难度普及/提高- 提交该题 讨论 题解 记录   题目描述 R 国和 S 国正 ...