一、简单选择器：
1.类型选择器（又名元素选择器）：
即对HTML元素名的选择，比如<p>,<div>等。
2.类选择器：
对HTML元素的类名筛选选择
3.ID 选择器：
以#+ID来选择，ID必须当前文档唯一
4.通用选择器
类似：*{color:red}，对所有元素使用，一般不用。
二、属性选择器：
1.存在和值（Presence and value）属性选择器：
<style>
[data-vegetable]{
color: green
}
</style> <ul>
<li data-quantity="1kg" data-vegetable>Tomatoes</li>
</ul>
2.子串值（Substring value）属性选择器：
[attr|=val]: 选择attr属性的值是val或值以val-开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。[attr^=val]: 选择attr属性的值以val开头（包括val）的元素。[attr$=val]: 选择attr属性的值以val结尾（包括val）的元素。[attr*=val]: 选择attr属性的值中包含子字符串val的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
/* 语言选择的经典用法 */
[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;
}三、伪类（Pseudo-class）和伪元素
1.伪类
一个 CSS伪类（Pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。
2.伪元素
跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。
四、组合器和选择器组
| Combinators | Select |
|---|---|
| A,B | 匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）. |
| A B | 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点） |
| A > B | 匹配任意元素，满足条件：B是A的直接子节点 |
| A + B | 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面） |
| A ~ B | 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） |