CSS 属性选择器详解

CSS ID 选择器详解

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>

查察结果

按照详细属性值选择

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

例子 1

譬喻，假设但愿将指向 Web 处事器上某个指定文档的超链接酿成赤色，可以这样写：

a[href=""] {color: red;}

亲身试一试

例子 2

与简朴属性选择器相同，可以把多个属性-值选择器链接在一路来选择一个文档。

a[href=""][title="W3School"] {color: red;}

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

<a href="" title="W3School">W3School</a> <a href="" title="CSS">CSS</a> <a href="" 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>

查察结果

属性与属性值必需完全匹配

请留意，这种名目要求必需与属性值完全匹配。

假如属性值包括用空格脱离的值列表，匹配就也许出题目。

请思量一下的标志片断：

<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;} (