新增属性选择器

介绍

属性选择器早在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属性值的背景色：

1. .wrap a[href^="http://"]{background:orange;color:blue;}
2.  
3. .wrap a[href^="mailto:"]{background:blue;color:orange;}

上面代码选择了a标签的href属性，并且选取属性值为"http://"和"mailto:"开头的所有a标签，改变其颜色。

匹配包含值

E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。 也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中。

如下，我们设置a标签href的属性值的背景色：

1. .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的属性值的背景色：

1. .wrap a[href$="png"]{background:green;color:black;}

上面代码表示的是，选择.wrap中元素有href属性并以png值结尾的a元素。