CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
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去实现了的更多相关文章
- css3中强大的filter(滤镜)属性
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...
- CSS3中的变形处理(transform)属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...
- CSS3中的skew（）属性
刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...
- 总结·CSS3中定位模型之position属性的使用方法
一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...
- css3中的box-sizing常用的属性有哪些？分别有什么作用？
content-box:默认标准盒模型,总宽=width+padding+border+margin border-box:IE标准,怪异盒模型,总宽=width+margin inherit:从父元 ...
- css3中我们不知道的一些属性
1.图片作为边框:border-image; 2.圆角问题:border-radius:上.下.左.右: 3.字体的阴影与自动换行: 阴影: h1 {text-shadow: 5px 5px 5px ...
- JavaScript中Function原型及其prototype属性的简单应用
大家都知道在JavaScript中是没有类的概念的,但是却是有对象的概念的.有的人可能理解对象和类有些迷糊,这里简单的概括一下他们之间的区别: 类:抽象的概念,例如人,动物,汽车等都可以抽象成一个类 ...
- iphone中input按钮设置disabled属性出现灰色背景没有显示问题
在项目中发现发送验证码的按钮,在点击后添加disabled属性后,iphone手机中出现disabled属性的默认背景颜色没有显示,反而直接显示它下面的父级元素的白色 点击前 点击后 倒计时的按钮消失 ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
随机推荐
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
- 【Android UI设计与开发】4.底部菜单栏（一）Fragment介绍和简单实现
TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Acti ...
- Rem实现自适应初体验
第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图.其实轮播图的插件有很多,但是完全满足需求的并不容易找. 需求: 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片,可以自动平铺(有时候图 ...
- 单元测试---googletest
单元测试概述 测试并不只是测试工程师的责任,对于开发工程师,为了保证发布给测试环节的代码具有足够好的质量( Quality ),为所编写的功能代码编写适量的单元测试是十分必要的. 单元测试( Unit ...
- UESTC 31 饭卡(Card) --背包问题
背包问题. 思路:如果m<5,此时也不能消费,所以此时答案为m m>=5: 求出背包容量为m-5,买前n-1样便宜的菜(排个序)的最大价值(即最大消费,即消费完后剩余值最接近5)最后减去最 ...
- uGUI练习(一) Anchor
一.练习步骤 如果用过NGUI的Anchor,我们知道在2.x的版本有UIAnchor组件(下图左),3.x版本中,每个UIWidget有自带的Anchors(下图右) 而uGUI的Anchor用起来 ...
- 十个Flex/Air疑难杂症及解决方案简略
十个Flex/Air疑难杂症及解决方案简略 转自http://blog.sban.us/40.html 最近去一家台企,对方给我出了十道“难道”:在TileList中如果選擇檔過多,會出現捲軸,當拖動 ...
- [转]redis.conf的配置解析
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...
- java内部类 2016年12月13号
1.在外部类的任意位置创建内部类对象的方法: 1)从外部类的非静态方法之外的任意位置创建某个内部类的对象,必须指明这个对象所在的外部类和内部类:OuterClassName.InnerClassNam ...
- 关于多个EditText的OnTextChange事件陷入死循环的处理
需求:ListView的Item上面有三个EditText控件,分别为 数量 ,单价,总价,要求输入数量跟单价时候 总价跟着计算变化,当输入总价时候 数量不变,改变单价. 实现:首先肯定想到的是对Ed ...