一. 属性选择器概述

属性选择器是一种特殊类型的选择器，

它根据元素的 属性和属性值来匹配元素。

它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。

属性选择器可以根据其匹配属性值的方式分为两类：

1. 存在和值属性选择器(Presence and value)

   • css2.1支持

2. 子串值属性选择器(Substring value)。

   • css3增加

属性选择器IE7+才支持

二. 存在和值属性选择器

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

• [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 单词的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

<style>
/*
    具有"data-vegetable"属性的所有元素,
    将被给予绿色的文本颜色
*/
[data-vegetable] {
    color: green
}

/*
    具有"data-vegetable"属性且属性值刚好是"liquid"的所有元素，
    将被给予金色背景颜色
*/
[data-vegetable="liquid"] {
    background-color: goldenrod;
}

/*
    具有"data-vegetable"属性且属性值包含"spicy"的所有元素，
    即使某元素的该属性还包含其他属性值，
    都会被给予红色的文本颜色
*/
[data-vegetable~="spicy"] {
    color: red;
}
</style>

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
    <li data-quantity="1kg" data-vegetable>Tomatoes</li>
    <li data-quantity="3" data-vegetable>Onions</li>
    <li data-quantity="3" data-vegetable>Garlic</li>
    <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
    <li data-quantity="2kg" data-meat>Chicken</li>
    <li data-quantity="optional 150g" data-meat>Bacon bits</li>
    <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
    <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

说明:

• 属性选择器通常会和元素选择器交集使用. p[id]

• 属性可以是自定义属性.

三. 子串值（Substring value）属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，

因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

• [attr|=val] : 选择attr属性的值以val-开头的元素（-用来处理语言编码）。
• [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
• [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
• [attr*=val] : 选择attr属性的值中包含字符串val的元素。