1. 元素选择器
元素选择器是最基本的选择器，可以选择html的元素
例如: h1 { color: gray; } 所有的h1的标题颜色都会变为灰色。
2. 类选择器
选择class属性为某值的元素
.classname { }
例如: .warning { color: red } 将会选择所有class中含有warning的元素
3. ID选择器
选择id属性为某值的元素
id {}
例如 #warning { color: red } 将选择id为warning的元素
4. 选择器分组
即对多个不同的选择器，可以应用同一个声明，多个选择器用‘,’隔开
例如：h1, p { color: red; }, 将对文档中所有的h1元素和p元素都应用该规则
5. 多类选择器
多个类选择器连接在一起，仅选择同时包含这些类名的元素。
例如：.warning.urgent { color: red; },class中包含warning，同时包含urgent的元素。可能为<p class="warning urgent"/>或者<p class="urgent warning"/>或者<p class="urgent warning otherclass" />
6. 属性选择器
根据元素的属性以及属性值来选择元素。
6.1 简单属性选择器
选择有某个属性的元素，而不论元素的值是什么。
例如：h1[class]，所有有class属性的h1元素都会被选中
6.2 更加具体属性值选择
只选择有特定属性值的元素。
例如: a[href="www.baidu.com"]，只选择了a的href属性为"www.baidu.com"的a元素
6.3 多个属性同时选择
同时具有多个属性的元素。
例如: ahref, 选择同时具有href和title的a元素
6.4 根据部分属性值选择
| 类型 | 描述 |
|---|---|
| [foo~="bar"] | 选择foo属性值中包含bar的"独立单词"的所有元素 例如<a foo="bar">或者<a foo="bar test" />但不能是<a foo="barbar"/>
|
| [foo^="bar"] | 选择foo属性值以bar开头的所有元素 |
| [foo$="bar"] | 选择foo属性值以bar结尾的所有元素 |
| [foo*="bar"] | 选择foo属性值含有bar的所有元素 |
7. 使用文档结构选择
7.1 后代选择器
用空格分隔多个选择器，空格是一种结合符，表示”...在...中找到“
例如: h1 em { color: gray; }，表示找到h1元素后代中的所有em 元素
7.2 子元素选择
用 > 分隔多个选择器，表示选择元素的子元素
例如: h1>em { color: gray; }，表示选择作为h1元素子元素的所有em 元素
7.3 相邻兄弟元素
用 + 分隔多个选择器，表示选择紧接在另一个元素后的元素，并且二者有相同的父元素。
例如：h1 + em { color: gray; }，紧接着h1的所有em元素，并且他们有相同的父元素
8. 伪类和伪元素
8.1 伪类
8.1.1 链接伪类
两个只对含有href的a元素生效的伪类。
:link，指向一个未被访问的地址的a元素
:visited 指示作为已访问地址超链接的所有a元素
8.1.2 动态伪类
:focus 指示当前拥有输入焦点的元素
:hover 指示鼠标停留在哪个元素上
:active 指示被用户输入的元素
8.1.3 选择第一个子元素
:first-child 选择元素的第一个子元素
8.1.4 结合伪类
在同一个选择器中结合使用伪类。
例如: a:link:hover { color: red; } 鼠标停留在未访问的链接上。
8.2 伪元素
:first-letter
:first-line
:before
:after
