css属性选择器

Posted 2021-09-10 star

1. [attr]——匹配的元素拥有指定属性attr，无论属性值是什么，例如：input[disabled]。

2. [attr="value"]——匹配的元素拥有指定属性attr，且属性值等于指定的字符串值，例如：input[type="radio"]。

3. [attr^="value"]——“开头”属性选择器。该选择器匹配的元素拥有指定属性attr，且属性值的开头是指定的字符串值，例如：a[href^="https"]。

4. [attr$="value"]——“结尾”属性选择器。该选择器匹配的元素拥有指定属性attr，且属性值的结尾是指定的字符串值，例如：a[href$= ".pdf"]。

5. [attr＊="value"]——“包含”属性选择器。该选择器匹配的元素拥有指定属性attr，且属性值包含指定的字符串值，例如：[class＊="sprite-"]。

6. [attr~="value"]——“空格分隔的列表”属性选择器。该选择器匹配的元素拥有指定属性attr，且属性值是一个空格分隔的值列表，列表中的某个值等于指定的字符串值，例如：a[rel="author"]。 [attr|="value"]——匹配的元素拥有指定属性attr，且属性值要么等于指定的字符串值，要么以该字符串开头且紧跟着一个连字符（-）。适用于语言属性，因为该属性有时候会指定一种语言的子集（比如墨西哥西班牙语，es-MX，或者普通的西班牙语，es），例如：[lang|="es"]。

7. 上述属性选择器都是区分大小写的。选择器规范Level4提出了一种不区分大小写的修饰符，可以作用于任何属性选择器。它的用法是将i添加到结束方括号前面，例如：input[value="search"i]。