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. js开发工具箱

    昨天看到一位大牛的博客,里面有一篇文章“web前端开发分享-目录”,文章中提到的一个给前端er用的一个js开发工具箱.自己使用了一下,非常好用,代码压缩,代码美化,加密,解密之类基本功能都有,生成二维 ...

  2. 该怎么快速完成ZBrush中脸部的雕刻

    骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 若有疑问可直接访问:http://www.zbrushcn.c ...

  3. 五个有用的jquery小技巧

    1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { retu ...

  4. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

  5. leetcode-Single Number III 找独数

    Single Number III Given an array of numbers nums, in which exactly two elements appear only once and ...

  6. nginx + fastDFS 设置开机自动启动

    由于在服务器上有太多的软件 不可能每次启动都要重新启动服务吧(每晚断电...必须重启电脑) vim /etc/rc.d/rc.local 添加下列脚本 /usr/bin/fdfs_trackerd / ...

  7. R语言-merge和rbind

    rbind 使用方式 合并两个数据集,要求两个数据集的列数相等: rbind(parameter1,parameter2) 1 1 合并多个数据集,各个数据集的列数相等: rbind(paramete ...

  8. jquery中$("#afui").get(0)为什么要加get(0)呢？

    jquery中$("#afui").get(0)为什么要加get(0)呢? 2015-04-13 17:46SYYZZ3 | 浏览 509 次  Jquery $("#a ...

  9. Android 开发环境下载地址 -- 百度网盘 adt-bundle android-studio sdk adt 下载

    最近 Google 被墙了, 上传一下自己收集的 Android 开发环境, 下面给出的官网链接也可以下载; http://www.androiddevtools.cn/ 1. 百度网盘下载地址 An ...

  10. JS第一个动画

    描述:让页面中的一个盒子平稳向右移动到指定位置 <div id="div1"> <div> JS代码实现 <script type="tex ...