Attribute selectors
属性选择器
存否和值选择器
选择器 | 示例 | 描述 |
---|---|---|
[_attr_] | a[title] | 匹配带有一个名为_attr_的属性的元素——方括号里的值。 |
[_attr_=_value_] | a[href="https://example.com"] | 匹配带有一个名为_attr_的属性的元素,其值正为_value_——引号中的字符串。 |
[_attr_~=_value_] | p[class~="special"] | 匹配带有一个名为_attr_的属性的元素,其值正为_value_,或者匹配带有一个_attr_属性的元素,其值有一个或者更多,至少有一个和_value_匹配。 注意,在一列中的好几个值,是用空格隔开的。 |
[_attr_|=_value_] | div[lang|="zh"] | 匹配带有一个名为_attr_的属性的元素,其值可正为_value_,or begins with value immediately followed by a hyphen. |
- 使用
li[class]
,我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。 li[class="a"]
匹配带有一个a
类的选择器,不过不会选中一部分值为a
而另一部分是另一个用空格隔开的值的类,它选中了第二项。li[class~="a"]
会匹配一个a
类,不过也可以匹配一列用空格分开、包含a
类的值,它选中了第二和第三项。
li[class] {
font-size: 200%;
}
li[class="a"] {
background-color: yellow;
}
li[class~="a"] {
color: red;
}
<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>
子字符串匹配选择器
这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如,如果你有box-warning
和box-error
类,想把开头为“box-”字符串的每个物件都匹配上的话,你可以用[class^="box-"]
来把它们两个都选中。
选择器 | 示例 | 描述 |
---|---|---|
[attr^=value] | li[class^="box-"] | 匹配带有一个名为_attr_的属性的元素,其值开头为_value_子字符串。 |
[attr$=value] | li[class$="-box"] | 匹配带有一个名为_attr_的属性的元素,其值结尾为_value_子字符串 |
[attr*=value] | li[class*="box"] | 匹配带有一个名为_attr_的属性的元素,其值的字符串中的任何地方,至少出现了一次_value_子字符串。 |
下个示例展示了这些选择器的用法:
li[class^="a"]
匹配了任何值开头为a
的属性,于是匹配了前两项。li[class$="a"]
匹配了任何值结尾为a
的属性,于是匹配了第一和第三项。li[class*="a"]
匹配了任何值的字符串中出现了a
的属性,于是匹配了所有项。
li[class^="a"] {
font-size: 200%;
}
li[class$="a"] {
background-color: yellow;
}
li[class*="a"] {
color: red;
}
<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>
大小写敏感
如果你想在大小写不敏感的情况下,匹配属性值的话,你可以在闭合括号之前,使用i
值(case-insensitive)。这个标记告诉浏览器,要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话,值会按照文档语言对大小写的处理方式,进行匹配——HTML 中是大小写敏感的。
下面的示例中,第一个选择器将会匹配一个开头为a
的值,这样它只匹配了第一项,因为另外两项开头是大写的 A。第二个选择器使用了大小写不敏感的标记,于是匹配了所有项。
li[class^="a"] {
background-color: yellow;
}
li[class^="a" i] {
color: red;
}
<h1>Case-insensitivity</h1>
<ul>
<li class="a">Item 1</li>
<li class="A">Item 2</li>
<li class="Ab">Item 3</li>
</ul>
备注
Note:此外还有一个更加新的s
值(case-sensitive),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.它会强制在上下文的匹配正常为大小写不敏感的时候,强行要求匹配时大小写敏感。不过,在浏览器中它不太受支持,而且在上下文为HTML时也没啥用。