CSS 属性选择器详解.docVIP

CSS 属性选择器详解 Previous Page Next Page 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;} 这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色： planetVenus/planet planet moons=1Earth/planet planet moons=2Mars/planet 查看效果 根据具体属性值选择 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。 例子 1 例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写： a[href=/about_us.asp] {color: red;} 亲自试一试 例子 2 与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。 a[href=/][title=W3School] {color: red;} 这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响： a href=/ title=W3SchoolW3School/a a href=/css/ title=CSSCSS/a a href=/html/ title=HTMLHTML/a 亲自试一试 例子 3 同样地，XML 语言也可以利用这种方法来设置样式。 下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素： planet[moons=1] {color: red;} 上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响： planetVenus/planet planet moons=1Earth/planet planet moons=2Mars/planet 查看效果 属性与属性值必须完全匹配 请注意，这种格式要求必须与属性值完全匹配。 如果属性值包含用空格分隔的值列表，匹配就可能出问题。 请考虑一下的标记片段： p class=important warningThis 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[important] 应用到 HTML 文档时是等价的。 那么，为什么还要有 ~= 属性选择器呢？因为它能用于任何属性，而不只是 class。 例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可