# CSS 属性选择器详解 **CSS 2 引入了属性选择器。** **属性选择器可以根据元素的属性及属性值来选择元素。** ## 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。 ### 例子 1 如果您希望把包含标题(title)的所有元素变为红色,可以写作: ``` *[title] {color:red;} ``` ### 例子 2 与上面类似,可以只对有 href 属性的锚(a 元素)应用样式: ``` a[href] {color:red;} ``` ### 例子 3 还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。 例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写: ``` a[href][title] {color:red;} ``` ### 例子 4 可以采用一些创造性的方法使用这个特性。 例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像: ``` img[alt] {border: 5px solid red;} ``` 提示:上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效。 ### 例子 5:为 XML 文档使用属性选择器 属性选择器在 XML 文档中相当有用,因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。 假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写: ``` planet[moons] {color:red;} ``` 这会让以下标记片段中的第二个和第三个元素的文本显示为红色,但第一个元素的文本不是红色: ``` <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> ``` [查看效果](/css/planetml_attselector_att.xml) ## 根据具体属性值选择 除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。 ### 例子 1 例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写: ``` a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} ``` ### 例子 2 与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。 ``` 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> ``` ### 例子 3 同样地,XML 语言也可以利用这种方法来设置样式。 下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素: ``` planet[moons="1"] {color: red;} ``` 上面的代码会把以下标记中的第二个元素变成红色,但第一个和第三个元素不受影响: ``` <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> ``` [查看效果](/css/planetml_attselector_val.xml) ### 属性与属性值必须完全匹配 请注意,这种格式要求必须与属性值完全匹配。 如果属性值包含用空格分隔的值列表,匹配就可能出问题。 请考虑一下的标记片段: ``` <p class="important warning">This paragraph is a very important warning.</p> ``` 如果写成 p[class="important"],那么这个规则不能匹配示例标记。 要根据具体属性值来选择该元素,必须这样写: ``` p[class="important warning"] {color: red;} ``` ## 根据部分属性值选择 如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。 假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点: ``` p[class~="important"] {color: red;} ``` 如果忽略了波浪号,则说明需要完成完全值匹配。 ### 部分值属性选择器与点号类名记法的区别 该选择器等价于我们在类选择器中讨论过的点号类名记法。 也就是说,p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。 那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。 例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片: ``` img[title~="Figure"] {border: 1px solid gray;} ``` 这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。 ### 子串匹配属性选择器 下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。 很多现代浏览器都支持这些选择器,包括 IE7。 下表是对这些选择器的简单总结: | 类型 | 描述 | | --- | --- | | [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 | | [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 | | [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 | 可以想到,这些选择有很多用途。 举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则: ``` a[href*="w3school.com.cn"] {color: red;} ``` 提示:任何属性都可以使用这些选择器。 ## 特定属性选择类型 最后为您介绍特定属性选择器。请看下面的例子: ``` *[lang|="en"] {color: red;} ``` 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素: ``` <p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> ``` 一般来说,[att|="val"] 可以用于任何属性及其值。 假设一个 HTML 文档中有一系列图片,其中每个图片的文件名都形如 _figure-1.jpg_ 和 _figure-2.jpg_。就可以使用以下选择器匹配所有这些图像: ``` img[src|="figure"] {border: 1px solid gray;} ``` 当然,这种属性选择器最常见的用途还是匹配语言值。 ## CSS 选择器参考手册 | 选择器 | 描述 | | --- | --- | | [[_attribute_]](/cssref/selector_attribute.asp "CSS [attribute] 选择器") | 用于选取带有指定属性的元素。 | | [[_attribute_=_value_]](/cssref/selector_attribute_value.asp "CSS [attribute=value] 选择器") | 用于选取带有指定属性和值的元素。 | | [[_attribute_~=_value_]](/cssref/selector_attribute_value_contain.asp "CSS [attribute~=value] 选择器") | 用于选取属性值中包含指定词汇的元素。 | | [[_attribute_&#124;=_value_]](/cssref/selector_attribute_value_start.asp "CSS [attribute&#124;=value] 选择器") | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 | | [[_attribute_^=_value_]](/cssref/selector_attr_begin.asp "CSS [attribute^=value] 选择器") | 匹配属性值以指定值开头的每个元素。 | | [[_attribute_$=_value_]](/cssref/selector_attr_end.asp "CSS [attribute$=value] 选择器") | 匹配属性值以指定值结尾的每个元素。 | | [[_attribute_*=_value_]](/cssref/selector_attr_contain.asp "CSS [attribute*=value] 选择器") | 匹配属性值中包含指定值的每个元素。 |