属性选择器

HTML 元素可以带有属性，它提供了关于如何标记的更详细信息。在CSS 中，你能用属性选择器来选中带有特定属性的元素。

存否和值选择器

存否 和 值 选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

[attr]

选择带有一个名为attr的属性的元素——方括号里的值

[attr=value]

选择带有一个名为attr的属性的元素，其值刚好为value——引号中的字符串

[attr~=value]

选择带有一个名为attr的属性的元素，其值刚好为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配 注意，在一列中的好几个值，是用空格隔开的

[attr|=value]

选择带有一个名为attr的属性的元素，其值可刚好为value，或者开始为value，后面紧随着一个连字符

代码示例

<ul>
    <li class="a"> Item 1 </li>
    <li class="a b"> Item 2 </li>
    <li class="ab"> Item 3 </li>
    <li lang="zh-CN"> Item 4 </li>
    <li> Item 5 </li>
</ul>

li[class] {
    /** 选择所有带有 class 属性的 li 元素，除了最后一项 */
    font-size: 200%;
}
li[class="a"] {
    /** 选择 class 为 a 的 li 元素，会精确匹配，只选择第一项 */
    background-color: yellow;
}
li[class~="a"] {
    /** 选择 class 包含 a 的 li 元素，可以匹配一列用空格分开、包含a类的值，会选择第一、第二项 */
    color: red;
}
li[lang|="zh"]{
   /** 选择带有 lang 属性的 li 元素，并且 lang 的值刚好等于 zh ，或者 lang 的值以 zh- 开头，会选择第四项  */
   font-size:20px;
}

子字符串匹配选择器

子字符串匹配 选择器让更高级的属性的值的子字符串的匹配变得可行

[attr^=value]

选择带有一个名为attr的属性的元素，其值开头为value子字符串

[attr$=value]

选择带有一个名为attr的属性的元素，其值结尾为value子字符串

[attr*=value]

选择带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串

代码示例

<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>

li[class^="a"] {
    /** 选择 class 值开头为a的属性，会选择前两项 */
    font-size: 12px;
}
li[class$="a"] {
    /** 选择 class 值结尾为a的属性，会选择第一和第三项 */
    background-color: yellow;
}
li[class*="a"] {
    /** 选择 class 值的字符串中出现了a的属性，会选择所有项 */
    color: red;
}

ℹ️提示

大小写敏感

在 HTML 中是大小写敏感的，如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用 i 值。

i 这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。例如：

代码示例

<ul>
    <li class="a">Item 1</li>
    <li class="A">Item 2</li>
    <li class="Ab">Item 3</li>
</ul>

li[class^="a"] {
    /** 选择第一项 */
    background-color: yellow;
}

li[class^="a" i] {
    /** 选择所有项 */
    color: red;
}