CSS3中属性选择器使用方法详解

注释：

一、属性选择器除了IE6不支持外，其他的浏览器都能支持。
二、E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

CSS3中新增了许多选择器，今天零度给大家说说CSS3的属性选择器。

与CSS2相比，CSS3新增了3种属性选择器：[attr^=value]、[attr$=value]、[attr*=value]；分别来讲解一下。

一、[attr^=value]属性选择器

大家如果接触过正则表达式的话，应该知道^符号的意思，是表示开头，没错，这里也是表示开头的意思，意思就是选择属性名attr的开头值为value的元素！

举个例子：

二、[attr$=value]属性选择器

相比较前一个，这一个就很容易理解了，$符号就代表结尾，这里意思是选择属性名attr的结尾值为value的元素！

例子：

这样就会选择class为teacher的div。

三、[attr*=value]属性选择器

最后这一个和前面两个的区别是符号换成了*，这个代表通配符的意思，意思是选择属性名attr的值包含value的元素！

这样就会选择class为teacher和class为teach的两个div。

这三种属性选择器大家如果用的熟练的话会对提高工作效率有很大帮助。