css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解

css中属性选择器我感觉与css2有比较大的区别了，下面我整理了一些关于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的元素！

举个例子：

代码如下

复制代码

[class^=tea]{width:200px; height:200px;}  /*此选择器表示选择class开头字符串为tea的元素*/ 我的class是teacher 我的class是tea 我的class是teach 我的class是aaa 这样会选择前三个元素，而不会选择最后一个元素。 二、[attr$=value]属性选择器 相比较前一个，这一个就很容易理解了，$符号就代表结尾，这里意思是选择属性名attr的结尾值为value的元素！ 例子：  代码如下 复制代码 [class$=er]{width:200px; height:200px;}  /*此选择器表示选择class结尾字符串为er的元素*/ 我的class是teacher 我的class是tea 我的class是teach 我的class是aaa 这样就会选择class为teacher的div。 三、[attr*=value]属性选择器 最后这一个和前面两个的区别是符号换成了*，这个代表通配符的意思，意思是选择属性名attr的值包含value的元素！  代码如下 复制代码 [class$=ch]{width:200px; height:200px;}  /*此选择器表示选择class包含字符串为ch的元素*/ 我的class是teacher 我的class是tea 我的class是teach 我的class是aaa 这样就会选择class为teacher和class为teach的两个div。 这三种属性选择器大家如果用的熟练的话会对提高工作效率有很大帮助。