HTML的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS_counter</title>

<style>

body{

    /*

        需要一个变量 或者第二个参数一个初始值，第二个参数可以不要，默认是从1开始的，(这不科学)

    */

    counter-reset : test 100;

}

div.num:after{

    /*如果不把这个元素设置成伪类;是没有效果的;*/

    counter-increment : test;

    /*这里利用了另一个CSS3的属性content*/

    content : counter(test);

    height : 40px;

}

div.num:before{

    /*CSS3的content属性*/

    content : "this is before preFix"

}

div.content{

    /*WARN : 这个content属性是无效的;*/

    content : "noContent";

}

</style>

</head>

<body>

    <dl>

        <dt>知识点1：</dt>

        <dd>CSS3中的content属性</dd>

        <dt>知识点2：</dt>

        <dd>CSS3中的counter-reset和counter-increment属性</dd>

    </dl>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="content"></div>

</body>

</html>

以及CSS3中的attr属性可以获取到元素属性值例如：content : attr("attr");

有一点需要注意的是：content和counter只能用在伪类那边的，平常清浮动也用到伪类的content：”“；

参考链接：

　　http://www.w3school.com.cn/cssref/pr_gen_counter-reset.asp

　　http://msdn.microsoft.com/zh-cn/library/gg721754(v=Expression.40).aspx

CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了的更多相关文章

  1. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  2. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  3. CSS3中的skew（）属性

    刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...

  4. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  5. css3中的box-sizing常用的属性有哪些？分别有什么作用？

    content-box:默认标准盒模型,总宽=width+padding+border+margin border-box:IE标准,怪异盒模型,总宽=width+margin inherit:从父元 ...

  6. css3中我们不知道的一些属性

    1.图片作为边框:border-image; 2.圆角问题:border-radius:上.下.左.右: 3.字体的阴影与自动换行: 阴影: h1 {text-shadow: 5px 5px 5px ...

  7. JavaScript中Function原型及其prototype属性的简单应用

    大家都知道在JavaScript中是没有类的概念的,但是却是有对象的概念的.有的人可能理解对象和类有些迷糊,这里简单的概括一下他们之间的区别: 类:抽象的概念,例如人,动物,汽车等都可以抽象成一个类 ...

  8. iphone中input按钮设置disabled属性出现灰色背景没有显示问题

    在项目中发现发送验证码的按钮,在点击后添加disabled属性后,iphone手机中出现disabled属性的默认背景颜色没有显示,反而直接显示它下面的父级元素的白色 点击前 点击后 倒计时的按钮消失 ...

  9. CSS中content属性的妙用

    前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...

随机推荐

  1. 瓶颈生成树与最小生成树 POJ 2395 Out of Hay

    百度百科:瓶颈生成树 瓶颈生成树 :无向图G的一颗瓶颈生成树是这样的一颗生成树,它最大的边权值在G的所有生成树中是最小的.瓶颈生成树的值为T中最大权值边的权. 无向图的最小生成树一定是瓶颈生成树,但瓶 ...

  2. [cocos2dx] 让UIButton支持disable状态

    摘要: 主要解决cocos2dx-2.2.2版本中, UIButton显示不了disable状态图的问题. 顺便, 理解了一下cocos2dx中UIWidget的渲染原理. 博客: http://ww ...

  3. J2EE中getParameter与getAttribute以及EL表达式${requestScope}和${param[]}

    getParameter ① 得到的都是String类型的.如http://name.jsp?name=xy中的xy ② 获取POST/GET传递的参数值 ③ 用于客户端重定向,如点击链接或提交按扭时 ...

  4. Android配置----小米手机通过wifi连接ADB调试Android应用

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  5. java 11-7String类里的方法的一些案例

    1. 把int数组拼接成字符串的案例 需求:把数组中的数据按照指定个格式拼接成一个字符串 举例: int[] arr = {1,2,3}; 分析: A:首先定义一个空的字符串 B:其次先给这个字符串拼 ...

  6. Vernam密码

    Vernam加密法也称一次一密(One-Time-Pad),用随机的非重复的字符集合作为输出密文.这里最重要的是,一旦使用了变换的输入密文,就不再在任何其他消息中使用这个输入密文(因此是一次性的).输 ...

  7. 在文本中匹配链接并添加A标签

    (?<!href="|">)(https?:\/\/[\w\-\.!~?&=+\*\'(),\/]+)((?!\<\/\a\>).)* 这个正则可以 ...

  8. 06Spring_使用注解配置bean对象

    Spring注解开发需要jar包 和 xml开发 一样的 ! 第一步: 新建项目, 导入jar包(就是前一篇文章里面的那几个核心jar包) 第二步: 在需要spring创建对象类上面 添加@Compo ...

  9. usb驱动开发11之设备生命线

    暂时先告别媒人,我们去分析各自的生命旅程,最后还会回到usb_device_match函数. 首先当你将usb设备连接在hub的某个端口上,hub检测到有设备连接了进来,它会为设备分配一个struct ...

  10. salt-ssh

    1.生产---测试--开发 salt-runners salt-run manage.status#显示当前up或down的minion salt-run manage.down salt-run m ...