CSS3-新增属性选择器
2015-04-16 22:28
447 查看
属性选择器早在CSS2中就被引入了,其主要作用就是为带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。
在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
CSS3的属性选择器主要包括以下几种:
1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
2. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
3. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
这个运用在给你一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现。
在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
CSS3的属性选择器主要包括以下几种:
1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
2. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
3. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
匹配开始值
E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,也就是说,所选择的属性其对应的属性值是以“value”开始的。.wrap a[href^="http://"]{background:orange;color:blue;} .wrap a[href^="mailto:"]{background:blue;color:orange;}上面代码选择了a标签的href属性,并且选取属性值为"http://"和"mailto:"开头的所有a标签,改变其颜色。
匹配包含值
E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。 也就是说,只要你所选择的属性,其属性值中有这个"value"值都将被选中。.wrap a[title*="hubwiz"]{background:black;color:white;}上面代码表示的是,选择.demo中元素有title属性并对应属性值包含hubwiz值的a元素。
匹配结尾值
E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素。这个运用在给你一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现。
.wrap a[href$="png"]{background:green;color:black;}上面代码表示的是,选择.wrap中元素有href属性并以png值结尾的a元素。
相关文章推荐
- CSS3的新增选择器示例-属性选择器
- css3部分新增属性选择器
- CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]
- css3第二课时!css3新增属性选择器!
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
- CSS3新增文本属性
- 1-6:css3新增的属性
- 【前端开发系列】—— CSS3属性选择器总结
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
- CSS3 选择器——属性选择器
- 晨读笔记:CSS3选择器之属性选择器
- 【CSS3】---属性选择器
- HTML5中CSS3的属性选择器
- CSS3选择器——属性选择器
- css3新增属性
- CSS3新增的有关背景与边框的属性
- 2016.3.16__CSS3新增属性__第九天
- css3新增属性设置图片特效
- css3学习 之 css选择器(css3 属性选择器)
- css考核点整理(五)-css3新增的常用属性