<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>
/* 语言选择的经典用法 */
[lang|="fr"] {
font-weight: bold;
}
/* 具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色 */
[data-vegetable*="not spicy"] {
color: green;
}
/* 具有"data-quantity"属性其值以"kg"结尾的所有元素 */
[data-quantity$="kg"] {
font-weight: bold;
}
/* 具有属性"data-quantity"其值以"optional"开头的所有元素 */
[data-quantity^="optional"] {
opacity: 0.5;
}
◦[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）
◦[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素
◦[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素
◦[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）
◦伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。该选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素 ◦伪类（Pseudo-class）选择器
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
/* 这些样式将在任何情况下应用于我们的链接 */
a {
color: blue;
font-weight: bold;
}
/* 我们想让被访问过的链接和未被访问的链接看起来一样 */
a:visited {
color: blue;
}
/* 当光标悬停于链接，键盘激活或锁定链接时，我们让链接呈现高亮 */
a:hover,
a:active,
a:focus {
color: darkred;
text-decoration: none;
}◦一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。
◦伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。该选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素 ◦伪元素选择器
