CSS 属性选择器详解

亲自试一试

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

亲自试一试

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

亲自试一试

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

亲自试一试

提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

 planet Venus /planet  planet moons= 1 Earth /planet  planet moons= 2 Mars /planet 

查看效果

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href= http://www.w3school.com.cn/about_us.asp ] {color: red;}

亲自试一试

与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href= http://www.w3school.com.cn/ ][title= W3School ] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

 a href= http://www.w3school.com.cn/ title= W3School W3School /a  a href= http://www.w3school.com.cn/css/ title= CSS CSS /a  a href= http://www.w3school.com.cn/html/ title= HTML HTML /a 

亲自试一试

同样地，XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

planet[moons= 1 ] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

 planet Venus /planet  planet moons= 1 Earth /planet  planet moons= 2 Mars /planet 

查看效果

请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

请考虑一下的标记片段：

 p >
如果写成 p[ >
要根据具体属性值来选择该元素，必须这样写：
p[ >
亲自试一试

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~= important ] {color: red;}
亲自试一试
如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p[ >
那么，为什么还要有 ~= 属性选择器呢？因为它能用于任何属性，而不只是 class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：
img[title~= Figure ] {border: 1px solid gray;}
这个规则会选择 title 文本包含 Figure 的所有图像。没有 title 属性或者 title 属性中不包含 Figure 的图像都不会匹配。
亲自试一试
子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。
很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：

举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。