CSS3选择器——属性选择器

属性选择器早在CSS2中就被引⼊了，其主要作⽤就是对带有指定属性的HTML 元素设置样式。使⽤CSS3属性选择器，可以只指定元素的某个属性，或者同时指定元素的某个属性和其对应的属性值。

CSS3的属性选择器主要包括以下⼏种：

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

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

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

5. E[attr$=\"value\"]：指定了属性名，并且有属性值，⽽且属性值是以value结束的；6. E[attr*=\"value\"]：指定了属性名，并且有属性值，⽽且属值中包含了value；

7. E[attr|=\"value\"]：指定了属性名，并且属性值是value或者以“value-”开头的值（⽐如说zh-cn）;为了更好的说明CSS3属性选择器的使⽤⽅法，把第⼀节的demo换成别的结构，如下所⽰：

.demo {

width: 300px;

border: 1px solid #ccc; padding: 10px; }

.demo a { float: left;

display: block; height: 20px; line-height: 20px; width: 20px;

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green;

margin-right: 5px; text-decoration: none; }

最初效果如下所⽰：

下⾯就开始针对上⾯列出的每个属性选择器来，具体分析其使⽤⽅法。⼀、E[attr]

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

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

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

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

.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\"，这也是这两种选择器的最⼤区是之处。从⽽缩⼩了选择 围，更能精确选择⾃⼰需要的元素，在前⾯实例基础上我们进⾏⼀下简单的修改：

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

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

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

.demo a[href=\"http://www.w3cplus.com\"][title] {background: yellow; color:green;}

效果如下：

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

7

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

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

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

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

IE6浏览器不⽀持这种选择器。三、E[attr~=\"value\"]

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

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

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

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

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

这样将不会选择中任何元素，因为在所有a元素中⽆法找到完全匹配的\"title='website'\换句话说就没有选中任何元素，效果如下：

这个实例再次证明了E[attr=\"value\"]和E[attr~=\"value\"]之间的区别，和其中“〜”所取的作⽤，总结：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。IE6不⽀持E[attr~=\"value\"]属性选择器。四、E[attr^=\"value\"]

E[attr^=\"value\"]属性选择器，指的是选择attr属性值以“value”开头的所有元素，换句话说，选择的属性其以对应的属性值是以“value”开始的：

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

上⾯代码表⽰的是选择了以href属性，并且以\"http://\"和\"mailto:\"开头的属性值的所有a元素，换过更简单⼀点的呢？只要a元素中的href属性值是以\"http://\"或\"mailto:\"开头的a元素都会以选中，那么下⾯⼤家请对照上⾯的html和下⾯的效果图，看看是不是那么⼀回事：IE6不⽀持E[attr^=\"value\"]选择器。五、E[attr$=\"value\"]

Ｅ[attr$=\"value\"]属性选择器刚好与E[attr^=\"value\"]选择器相反，E[attr$=\"value\"]表⽰的是选择attr属性值以\"value\"结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运⽤在给你⼀些特殊的链接加背景图⽚很⽅便的，⽐如说给pdf,png,doc等不同⽂件加上不同icon，我们就可以使⽤这个属性来实现，如：

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

上⾯代码表⽰的是，选择div.demo中元素有href属性，并以png值结尾的a元素。（正如上⾯所说，只不过这⾥使⽤的是改变元素的背景⾊），效果如下：IE6不⽀持E[attr$=\"value\"]属性选择器。六、E[attr*=\"value\"]

E[attr*=\"value\"]属性选择器表⽰的是选择attr属性值中包含⼦串\"value\"的所有元素。也就是说，只要你所选择的属性，其属性值中有这个\"value\"值都将被选中，如：

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

上⾯代码表⽰的是：选择了div.demo中a元素，⽽a元素的title属性中只要有\"site\"就符合选择条件。效果如下：IE6不⽀持E[attr*=\"value\"]选择器。七、E[attr|=\"value\"]

E[attr|=\"value\"]是属性选择器中的最后⼀种，在说这个选择器使⽤之前先提醒⼤家attr后⾯的是⼀个竖线“｜”⽽不是l，⼩⼼搞错了。E[attr|=\"value\"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,我们来看个实例：

.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\这样的⽅式来命名的，那么使⽤这种选择器选中图⽚就很⽅便了，⼤家可以在本地尝试⼀下，这种属性选择器最常常⽤的地⽅是如上⾯的⽰例⽤来匹配语⾔。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\配置不同的icon图标。