CSS3 选择器——属性选择器（复习）

1. E[attr]：只使用属性名，但没有确定任何属性值；

   .demo a[id] {background: blue; color:yellow;font-weight:bold;} 
   .demo a[href][title] {background: yellow; color:green;}

    
2. E[attr="value"]：指定属性名，并指定了该属性的属性值；

   .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
   .demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}

    对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时，如：

   <a href="" class="links item" title="open the website">7</a>

    例如上面的代码，如果你写成：

   .demo a[class="links"]{color:red};/*这是一种写法不能和上面的html所匹配*/

    
3. E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；

   .demo a[title~="website"]{background:orange;color:green;}

    这个实例再次证明了E[attr="value"]和E[attr~="value"]之间的区别，和其中“〜”所取的作用，我总结了一句话：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。 
4. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

   .demo a[href^="http://"]{background:orange;color:green;}
   .demo a[href^="mailto:"]{background:green;color:orange;}

    
5. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；

   .demo a[href$="png"]{background:orange;color:green;}

    
6. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

   .demo a[title*="site"]{background:black;color:white;}

    
7. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

   .demo a[lang|="zh"]{background:gray;color:yellow;}

 

 有关于属性选择器就上面这些内容了，属性选择器除了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图标。

 

原文：http://www.w3cplus.com/css3/attribute-selectors