基本选择器
| | 选择器 | 语法 |
|---|
| 类型选择器2 | elename |
| 类选择器 | .classname |
| ID选择器 | #idname |
| 通用选择器 | * |
| 属性选择器 | [attr] 选择存在attr属性的元素
[attr=value] 选择attr属性为value的元素
[attr~=value] 选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素
[attr*=value] 选择attr属性的值中包含字符串val的元素
[attr^=value] 选择attr属性的值以val开头（包括val）的元素
[attr$=value] 选择attr属性的值以val结尾（包括val）的元素
[attr|=value] 选择attr属性的值以val或val-开头的元素 |
关系选择器
| | 选择器 | 语法 | 解释 |
|---|
| 相邻兄弟选择器 | A+B | 匹配紧跟其A元素的兄弟元素B |
| 一般兄弟选择器 | A~B | 匹配A元素后的兄弟元素中的B元素 |
| 子选择器 | A>B | 匹配A元素的子元素中的B元素 |
| 后代选择器 | A B | 匹配A元素的后代元素中的B元素 |
伪类选择器
伪类以一个冒号为前缀，表示了在某种状态下的指定元素。
| | 选择器 | 解释 |
|---|
:focus | 当元素获得焦点时选中 |
:link | 应用于URL尚未访问的链接 |
:hover | 应用于处于“悬停状态”的元素 |
:active | 应用于处于激活状态的元素 |
:visited | 应用于URL访问过的链接 |
:first-child | 元素作为第一个子元素时被选中 |
:first-of-type | 元素作为同类型的第一个子元素时被选中 |
:last-child | 元素作为最后一个子元素时被选中 |
:last-of-type | 元素作为同类型的最后一个子元素时被选中 |
:not(X) | 匹配不符合参数选择器X描述的元素,X为简单的选择器 |
:nth-child(an+b) | 匹配在兄弟节点中的位置与模式 an+b 匹配的元素 |
:nth-of-type(an+b) | 匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素 |
:nth-last-child(an+b) | 和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处 |
:nth-last-of-type(an+b) | 和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处 |
:only-child | 作为父元素的唯一一个子元素被选中 |
:only-of-type | 没有同类型的兄弟元素时被选中 |
伪元素选择器
伪元素以两个冒号为前缀，代表的是指定元素的某个部分。实际上在DOM树中并不存在。
| | 选择器 | 解释 |
|---|
::after | 创建一个伪元素，做为已选中元素的最后一个子元素 |
::before | 创建一个伪元素，做为已选中元素的第一个子元素 |
::first-line | 块级元素的第一行 |
::first-letter | 某块级元素第一行的第一个字母(文字所处的行之前没有其他内容) |
::section | 文档中被选中的部分 |
