属性选择器

存在和值选择器

这些选择器使你可以仅根据属性的存在（例如 href），或根据与属性值进行的各种不同匹配来选择元素。

在下面的示例中，你可以看到这些选择器的使用。

• 通过使用 li[class]，我们可以匹配任何带有 class 属性的列表项。这会匹配除第一个之外的所有列表项。
• li[class="a"] 匹配 class 为 a 的选择器，但不匹配 class 为 a 且其值中还包含其他以空格分隔的 class 的选择器。它选择了第二个列表项。
• li[class~="a"] 会匹配 class 为 a 的项，也匹配值中包含 a 作为空格分隔列表一部分的项。它选择了第二个和第三个列表项。

<h1>Attribute presence and value selectors</h1>
<ul>
  <li>Item 1</li>
  <li class="a">Item 2</li>
  <li class="a b">Item 3</li>
  <li class="ab">Item 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class] {
  font-size: 120%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}

尝试编辑上面的 CSS，添加一个规则，仅选择 class 属性值为 ab 的列表项，并为它们设置 white 文本 color 和 purple background-color。

子字符串匹配选择器

这些选择器允许对属性值中的子字符串进行更高级的匹配。例如，如果你有 class box-warning 和 box-error，并且想要匹配所有以字符串 "box-" 开头的项，你可以使用 [class^="box-"] 来同时选择它们（或者如上面章节所述使用 [class|="box"]）。

下一个示例展示了这些选择器的用法

• li[class^="a"] 匹配任何以 a 开头的属性值，因此匹配前两个列表项。
• li[class$="a"] 匹配任何以 a 结尾的属性值，因此匹配第一个和第三个列表项。
• li[class*="a"] 匹配 a 出现在字符串中任何位置的属性值，因此它匹配我们所有的列表项。

<h1>Attribute substring matching selectors</h1>
<ul>
  <li class="a">Item 1</li>
  <li class="ab">Item 2</li>
  <li class="bca">Item 3</li>
  <li class="bcabc">Item 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class^="a"] {
  font-size: 120%;
}

li[class$="a"] {
  background-color: yellow;
}

li[class*="a"] {
  color: red;
}

尝试编辑上面的 CSS，添加一个规则，仅选择 class 属性值以 b 或 c 结尾的列表项，并为它们设置 2px 宽、solid、black 的 border。你可能需要使用 选择器列表 来解决这个问题。

总结

现在我们已经完成了属性选择器，你可以继续阅读下一篇文章，了解伪类和伪元素选择器。

• 上一页
• 概述：CSS 样式基础
• 下一页