复制代码.demo a[lang|=”zh”]{background:gray;color:yellow;}
上面的代码会选中了div.demo中lang属性等于zh或以zh-开头的所有a元素，大家可以对照前面的html代友，其中"2,3,4,6"被选中，因为他们都有一个lang属性，并且他们的属性值都符合以"zh"或"zh-"开始的元素。具体效果如下：
所以这种属性选择器用来匹配以“女value-1”,"value-2"的属性是很方便的，比如说你页面中有很多图片，图片文件名都是以"figure-1","figure-2"这样的方式来命名的，那么使用这种选择器选中图片就很方便了，大家可以在本地尝试一下，这种属性选择器最常常用的地方是如上面的示例用来匹配语言。
IE6不支持E[attr|="value"]选择器。
有关于属性选择器就上面这些内容了，属性选择器除了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图标。
到这里，CSS3的属性选择器就介绍完了，下一节将主要介绍CSS3的伪类选择器，特别是其中的nth-child选择器，将是CSS3选择器中最有吸引力的一部分，大家如果感兴趣的话，请观注本站的有关更新吧。让我们一起期待CSS3的无穷力量。
如需转载烦请注明出处：W3CPLUS
