CSS3 选择器——属性选择器

1. 出自：详细解释
2. 1.  E[attr]：只使用属性名，但没有确定任何属性值；
3. 2.  E[attr="value"]：指定属性名，并指定了该属性的属性值，完全匹配 value ，如<a href="" class="links item" title="open the website">7</a>  
4.     demo a[class="links item"]{color:red};/*这样才是匹配的，记得中间的空格不能少的哟*/  
5. 3.  E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value            词，而且等号前面的“〜”不能不写；
6. 4.  E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
7. 5.  E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的，这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon，我们就可以使用这个属性来实现；
8. 6.  E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value,包含子串"value"的所有元素,如website；
9. 7.  E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

有关于属性选择器就上面这些内容了，属性选择器除了IE6不支持外，其他的浏览器都能支持，这样一来，如果你在你的页面上使用了属性选择器，而且你需要处理ie6兼容问题，那你就需要确保IE6用别的方法来实现或者你应该确保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图标。