在 CSS选择器写法 一文中，@momo4 对选择器的基础部分做了详细说明。看的我是犯瘾了，那就对前文中未说的内容做个补充。
属性选择器
是否存值选择器
这些选择器允许基于一个元素自身是否存在（例如href ）或者基于各式不同的按属性值的匹配，来选取元素。
| 选择器 | 示例 | 释义 |
|---|---|---|
[attr] |
a[title] |
匹配 带有名为 attr 的属性 的元素——方括号里的值。 |
[attr=value] |
a[href="https://abc.com"] |
匹配 带有名为 attr 的属性 的元素，其 值为 value ——引号中的字符串。 注意，不会选中 包含该值但有空格隔开其它值 的元素。 |
[attr~=value] |
p[class~="special"] |
匹配带有一个 名为 attr 的属性的元素，其 值为 value ，或者匹配带有一个 attr 属性的元素，其值有一个或者更多，至少有一个和 value 匹配 。 注意，在一列中的好几个值，是用 空格隔开 的。 |
[attr|=value] |
div[lang|="zh"] |
匹配带有一个 名为 attr 的属性的元素，其 值可正为 value，或者开始为 value ，后面 紧随着一个连字符。 注意，它是 包含 [attr=value] 这种情况的。 |
HTML：
<p>我没有类名</p>
<p class="p">我有一个类名 —— p</p>
<p class="p p1">我有两个类名，用空格分隔的 —— p和p1</p>
<p class="p1-green">我有一个类名，但是用连字符连接的 —— p1-green</p>
CSS：
p[class] {
font-size: 16px;
}
p[class='p'] {
color: red;
}
p[class~='p'] {
font-weight: bold;
font-size: 20px;
}
p[class|='p1'] {
background-color: darkcyan;
color: white;
}
呈现效果：
子字符串匹配选择器
子字符串匹配选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有 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 子字符串。 |
HTML：
<p class="pop">我的类名为 —— pop</p>
<p class="polar">我的类名为 —— polar</p>
<p class="sugar">我的类名为 —— sugar</p>
CSS：
p[class^='po'] {
font-weight: bold;
font-size: 18px;
}
p[class$='ar'] {
color: red;
}
p[class*='ol'] {
background: darkcyan;
}
呈现效果：
大小写敏感
HTML 中是大小写敏感的。
如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用 i 值。
HTML：
<p class="pop">我的类名为 —— pop</p>
<p class="Polar">我的类名为 —— Polar</p>
<p class="Polar-bear">我的类名为 —— Polar-bear</p>
CSS：
p[class^='po'] {
font-size: 20px;
font-weight:bold;
}
p[class^='po' i] {
color: red;
}
呈现效果：
上述示例中，第一个选择器将会匹配一个开头为
po的值，这样它只匹配了第一项，因为另外两项开头Po存在大写 。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。
再次提醒：HTML 中是大小写敏感的。
限于篇幅，本节就先到这里，我将在 
下一节 中说说 选择器的优先级和权重计算 。
