新增属性选择器
2015-08-26 22:20
204 查看
介绍
属性选择器早在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;
匹配开始值
E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,也就是说,所选择的属性其对应的属性值是以“value”开始的。如下,我们设置a标签的href属性值的背景色:
.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"值都将被选中。如下,我们设置a标签href的属性值的背景色:
.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,我们就可以使用这个属性来实现。
如下,我们设置a标签href的属性值的背景色:
.wrap a[href$="png"]{background:green;color:black;}
上面代码表示的是,选择.wrap中元素有href属性并以png值结尾的a元素。
相关文章推荐
- java 大数计算
- 2015-08-26
- 自定义组合控件的使用
- 两道几何题的求解
- R 语言 ubantu配置以及安装
- Broadcast广播机制
- ArcGIS 10.3编译旧版本Addin错误的解决办法
- Android基础&进阶
- HDU1059 多重背包 多重部分和问题DP
- 深入剖析Tomcat类加载机制
- poj1184 聪明的打字员 BFS+剪枝
- 合并两个排序的链表
- Java多线程 -- 有返回值的线程
- JVM调优总结 -Xms -Xmx -Xmn -Xss
- 文章标题
- Javascript标准类型的方法集
- GUI编程笔记(java)10:GUI实现一级菜单
- apache 服务安装
- 在 WinCe 平台读写 ini 文件
- 设计呼叫中心的类