创建日期: 2020年4月13日
参考链接

准备工作：
如果你是新打开这篇文章，那在开始之前，请参看CSS实验道具，打开CSS实验的在线工具。

前言：
从HTML的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。

1. 存否和值选择器

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

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

• 使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
• li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
• li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

/* CSS */
li[class] {
    font-size: 200%;
}
li[class="a"] {
    background-color: yellow;
}
li[class~="a"] {
    color: red;
}

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

实验结果：

2. 子字符串匹配选择器

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。

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

• li[class^="a"]匹配了任何值开头为a的属性，于是匹配了前两项。
• li[class$="a"]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。
• li[class*="a"]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。

/* CSS */
li[class^="a"] {
    font-size: 200%;
}
li[class$="a"] {
    background-color: yellow;
}
li[class*="a"] {
    color: red;
}

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

实验结果：

3. 大小写敏感

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。
这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。
没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的。

下面的示例中，第一个选择器将会匹配一个开头为a的值，这样它只匹配了第一项，因为另外两项开头是大写的A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。

/* CSS */
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>

实验效果：

上一篇: CSS从小白到大神(二)CSS选择器1–––类型、类和ID选择器
下一篇：CSS从小白到大神(二)CSS选择器 3–––伪类和伪元素