基本选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有的 HTML 标签 |
| a | 元素选择器 | 选择文档中所有的 a 标签 |
| #id | ID 选择器 | 选择指定 id 属性值为 “id” 的标签 |
| .class | 类选择器 | 选择指定 class 属性值为 “class” 的任意类型的任意多个标签 |
| sel1,sel2 | 群组选择器 | 选择匹配 sel1和 sel2 的所有标签（同时选择多个标签，标签之间用逗号分隔） |
层次选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代/包含 选择器 | 选择 E 标签内的所有 F 标签 |
| E > F | 直接子代选择器 | 选择 E 标签的直接后代标签（儿子）—— F 标签（不能跨代选取：只能选儿子，不能选孙子） |
| E + F | 相邻兄弟选择器 | 选择紧跟 E 标签后的兄弟标签—— F 标签（只能选取后面的相邻的兄弟标签，而不是所有兄弟标签） |
| E ～ F | 通用兄弟选择器 | 选择 E 标签后面的所有兄弟标签—— F 标签 |
伪类选择器
动态伪类选择器
-
之所以称为动态伪类选择器，是因为它们根据条件的改变匹配元素，是相对于文档的固定状态来说的
-
:link选择器匹配超级链接，:visited选择器匹配用户已访问的超级链接对于用户访问过的链接，可在浏览器中设置保留已访问状态的时间，当用户清除浏览器历史记 录，或者历史记录自然超时，链接会返回未访问状态
-
:hover选择器匹配用户鼠标悬停在其上的任意元素 -
`:active 选择器匹配当前被用户**的元素。浏览器依然可以自行决定如何诠释**，但多数浏览器会在鼠标点击（在触摸屏上是手指按压）的情况下使用这个选择器
-
:focus选择器，它匹配当前获得焦点的元素
目标伪类选择器
-
:target选择器匹配 URL 片段标识符指向的元素
语言伪类选择器
-
:lang选择器匹配基于 lang 全局属性值的元素
UI 元素状态伪类选择器
-
:enabled和:disabled -
:checked选择器可以选中由 checked 属性或者用户勾选的单选按钮或者复选框 -
:default选择器从一组类似的元素中选择默认元素 -
:valid和:invalid选择器分别匹配符合和不符合它们的输入验证要求的 input 元素 -
:in-range选择器匹配位于指定范围内的 input 元素，:out-of-range选择器匹配位于指定范围之外的 input 元素 -
:required选择器匹配具有 required 属性的 input 元素，这能够确保用户必需输入与 input 元素相关的值才能提交表单
结构伪类选择器
-
使用结构伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀（：），例如
:empty。它们可以单独使用，也可以跟其他选择器组合使用，如p:empty -
:root选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器，因为总是返回 html 元素 -
:first-child选择器匹配由包含它们的元素（即父元素）定义的第一个子元素如果我们只使用
:first-child选择器，这意味着它会匹配任意元素的第一个子元素
将:first-child选择器用做修饰符，或者跟其他选择器组合使用可以缩小选中元素的范围，如span:first-child -
:last-child选择器匹配由包含它们的元素定义的最后一个元素 -
:only-child选择器匹配父元素包含的唯一子元素 -
:only-of-type选择器匹配父元素定义类型的唯一子元素 -
:nth-child选择器跟上一节讲的子元素选择器类似，但使用这类选择器可以指定一个索引以匹配特定位置的元素 -
:empty选择器匹配没有定义任何子元素的元素
否定伪类选择器
-
:not选择器可以对任意选择取反
伪元素选择器
-
伪元素选择器其实在 CSS 中一直存在，比如 “:first-line”、“:first-letter”、“:before” 和 “:after”
-
CSS3中对伪元素进行了一定的调整，在以前的基础上增加了一个冒号，也就相应地变成了
::first-line、::first-letter、::before和::after -
对于 IE6～8，仅支持单冒号表示法，而现代浏览器同时支持这两种表示法，另外一个区别是，双冒号与单冒号在 CSS3 中主要用来区别伪类和伪元素
-
::first-line -
::first-letter -
::before -
::after -
::selection(H5新增)