属性选择器

¥Presence and value selectors

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

¥These selectors enable the selection of an element based on the presence of an attribute alone (for example href), or on various different matches against the value of the attribute.

选择器	示例	描述
[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 开头，后跟连字符。

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

¥In the example below you can see these selectors being used.

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

¥Substring matching selectors

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

¥These selectors allow for more advanced matching of substrings inside the value of your attribute. For example, if you had classes of box-warning and box-error and wanted to match everything that started with the string "box-", you could use [class^="box-"] to select them both (or [class|="box"] as described in section above).

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

（旁白：注意到 ^ 和 $ 长期以来一直被用作所谓的正则表达式中的锚点，分别表示开始于和结束于。）

¥(Aside: It may help to note that ^ and $ have long been used as anchors in so-called regular expressions to mean begins with and ends with respectively.)

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

¥The next example shows usage of these selectors:

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

¥Case-sensitivity

如果要不区分大小写地匹配属性值，可以在右括号之前使用值 i。该标志告诉浏览器匹配 ASCII 个字符，不区分大小写。如果没有该标志，值将根据文档语言的区分大小写进行匹配 - 在 HTML 中，它将区分大小写。

¥If you want to match attribute values case-insensitively you can use the value i before the closing bracket. This flag tells the browser to match ASCII characters case-insensitively. Without the flag the values will be matched according to the case-sensitivity of the document language — in HTML's case it will be case sensitive.

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

¥In the example below, the first selector will match a value that begins with a — it only matches the first list item because the other two list items start with an uppercase A. The second selector uses the case-insensitive flag and so matches all of the list items.

注意：还有一个更新的值 s，它将在通常不区分大小写的上下文中强制进行区分大小写的匹配，但是这在浏览器中支持得不太好，并且在 HTML 上下文中不是很有用。

¥Note: There is also a newer value s, which will force case-sensitive matching in contexts where matching is normally case-insensitive, however this is less well supported in browsers and isn't very useful in an HTML context.

¥Summary

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

¥Now that we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors.