属性选择器

正如您在学习 HTML 时所知，元素可以具有属性，这些属性提供了有关标记元素的更多详细信息。在 CSS 中，您可以使用属性选择器来定位具有特定属性的元素。本课将向您展示如何使用这些非常有用的选择器。

先决条件	安装基本软件，基本了解文件操作，HTML 基础知识（学习HTML 简介），以及 CSS 的工作原理（学习CSS 入门）。
目标	学习什么是属性选择器以及如何使用它们。

存在和值选择器

这些选择器可以根据属性的存在（例如 href）或对属性值的各种不同匹配来选择元素。

选择器	示例	描述
`[attr]`	`a[title]`	匹配具有 attr 属性（其名称为方括号中的值）的元素。
`[attr=value]`	`a[href="https://example.com"]`	匹配具有 attr 属性且其值为 value（引号内的字符串）的元素。
`[attr~=value]`	`p[class~="special"]`	匹配具有 attr 属性且其值为 value 或其（空格分隔）值列表中包含 value 的元素。
`[attr\|=value]`	`div[lang\|="zh"]`	匹配具有 attr 属性且其值为 value 或以 value 开头，紧跟着连字符的元素。

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

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

这些选择器允许更高级地匹配属性值中的子字符串。例如，如果您有 box-warning 和 box-error 的类，并且想要匹配所有以字符串“box-”开头的类，您可以使用 [class^="box-"] 来选择两者（或 [class|="box"]，如上面的部分所述）。

选择器	示例	描述
`[attr^=value]`	`li[class^="box-"]`	匹配具有 attr 属性且其值以 value 开头的元素。
`[attr$=value]`	`li[class$="-box"]`	匹配具有 attr 属性且其值以 value 结尾的元素。
`[attr*=value]`	`li[class*="box"]`	匹配具有 attr 属性且其值包含 value 的元素（在字符串中的任何位置）。

（旁白：需要注意的是，^ 和 $ 长期以来一直用作所谓的正则表达式中的锚点，分别表示以...开头和以...结尾）。

以下示例显示了这些选择器的用法

如果您想匹配不区分大小写的属性值，您可以在结束括号之前使用值 i。此标志告诉浏览器不区分大小写地匹配ASCII 字符。如果没有此标志，值将根据文档语言的大小写敏感性进行匹配 — 在 HTML 的情况下，它将区分大小写。

在下面的示例中，第一个选择器将匹配以 a 开头的值 — 它只匹配第一个列表项，因为其他两个列表项以大写的 A 开头。第二个选择器使用不区分大小写的标志，因此匹配所有列表项。

注意： 还存在一个较新的值 s，它将在匹配通常不区分大小写的上下文中强制区分大小写的匹配，但它在浏览器中的支持程度较低，在 HTML 上下文中也不是很有用。

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