[教程] CSS3 选择器——属性选择器（一）

上一篇在《 CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是 对带有指定属性的HTML 元素设置样式 。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

• E[attr]：只使用属性名，但没有确定任何属性值；
• E[attr="value"]：指定属性名，并指定了该属性的属性值；
• E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
• E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
• E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
• E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
• E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
  

为了更好的说明CSS3属性选择器的使用方法，我们把第一节的demo换成别的结构，如下所示：

1. <div class="demo clearfix">
   
2.         <a href="#" target="_blank" class="links item first" id="first" title="">1</a>
   
3.         <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
   
4.         <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
   
5.         <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
   
6.         <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
   
7.         <a href="#" class="links item" title="website link" lang="zh">6</a>
   
8.         <a href="" class="links item" title="open the website" lang="cn">7</a>
   
9.         <a href="" class="links item" title="close the website" lang="en-zh">8</a>
   
10.         <a href="" class="links item" title="http://www.sina.com">9</a>
    
11.         <a href="" class="links item last" id="last">10</a>
    
12. </div>

复制代码

初步美化一下上面的代码：

1. .demo {
   
2.         width: 300px;
   
3.         border: 1px solid #ccc;
   
4.         padding: 10px;                  
   
5. }
   
6. 
   
7. .demo a {
   
8.         float: left;
   
9.         display: block;
   
10.         height: 20px;
    
11.         line-height: 20px;
    
12.         width: 20px;
    
13.         -moz-border-radius: 10px;
    
14.         -webkit-border-radius: 10px;
    
15.         border-radius: 10px;
    
16.         text-align: center;
    
17.         background: #f36;
    
18.         color: green;
    
19.         margin-right: 5px;
    
20.         text-decoration: none;
    
21. }

复制代码

最初效果如下所示：

 

下面就开始针对上面列出的每个属性选择器来，具体分析其使用方法。

一、E[attr]

E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器，如：

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

复制代码

上面代码所表示的，选择了div.demo下所有带有id属性的a元素，并在这个元素上使用背景色为兰色，前景色为黄色，字体加粗的样式，对照上面的html，我们不难发现，只有第一个和最后一个链接使用了id属性，所以选中了这两个a元素，效果如下所示：

 

上面是单一属性的使用，你也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中：

1. .demo a[href][title] {background: yellow; color:green;}      

复制代码

不用我说，上面的代码大家都知道是什么意思了，他表示的是选择div.demo下的同时具有href,title两个属性的a元素，并且应用相对应的样式，如下所示：

 

IE6不支持这个选择器。

二、Ｅ[attr="value"]

E[attr="value"]选择器和E[attr]选择器，从字面上就能很清楚的理解出来，E[attr="value"]是指定了属性值“value”，而E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值"value"，这也是这两种选择器的最大区是之处。从而缩小了选择 围，更能精确选择自己需要的元素，在前面实例基础上我们进行一下简单的修改：

1. .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

复制代码

和前面代码相比较，此处在id的属性基础上指定了相应的value值为“first”,这样一来我们选中的是div.demo中的a元素，并且这个元素有一个"id="first""属性值，请看下在的效果图：

E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围：

1. .demo a[href="#"][title] {background: yellow; color:green;}

复制代码

效果如下：

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

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

复制代码

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

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

复制代码

上面的属性选择器并不会和上在的html匹配,因为他们的属性和属性值没有完全匹配，需要改成如下所示的代码，才能正确匹配：

1. .demo a[class="links item"]{color:red};/*这样才是匹配的，记得中间的空格不能少的哟*/

复制代码

IE6浏览器不支持这种选择器。

三、E[attr~="value"]

如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~="value"]，这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素，而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中，他们两者区别就是一个有“〜”号，一个没有“〜”号。我们来看一个这方面的实例：

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

复制代码

上面代码表示的是，div.demo下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择，回头看看我们的html，不难发现所有a元素中“2，6，7，8”这四个a元素的title中都含有,所以被选中，请看效果：

 
如果我们在上面的代码中，把那个“〜”号省去，大家看看他们不同之处：

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

复制代码

这样将不会选择中任何元素，因为在所有a元素中无法找到完全匹配的"title='website'",换句话说就没有选中任何元素,这个实例再次证明了E[attr="value"]和E[attr~="value"]之间的区别，和其中“〜”所取的作用，我总结了一句话： 属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。

IE6不支持E[attr~="value"]属性选择器。