根本选择器
| 选择器 | 名称 | 备注 |
|---|---|---|
| class | 类选择器 | 类元素 |
| id | id 选择器 | ID 元素 |
| * | 通用元素选择器 | 任何元素 |
| element | 元素选择器 | HTML 元素 |
组合选择器
| 选择器 | 名称 | 备注 |
|---|---|---|
| A,B | 多元素选择器 | 同时匹配 A 元素或 B 元素 |
| A B | 后辈选择器 | 匹配 A 元素所有的后辈 B 元素 |
| A>B | 子元素选择器 | 匹配 A 元素的所有间接子元素 |
| A+B | 间接相邻选择器 | 匹配 A 元素之后的相邻的同级元素 B |
| A~B | 一般相邻选择器 | 匹配 A 元素之后的同级元素 B |
属性选择器
| 选择器 | 名称 | 备注 |
|---|---|---|
| [attribute] | [target] | 抉择所有带有 target 属性元素 |
| [attribute=value] | [target=-blank] | 抉择所有应用 target=”-blank” 的元素 |
| [attribute~=value] | [title~=flower] | 抉择题目属性蕴含单词 ”flower” 的所有元素 |
| [attribute ^= language] | [lang ^= en] | 抉择一个 lang 属性的起始值 =”EN” 的所有元素 |
| [attribute $= language] | [lang $= en] | 抉择一个 lang 属性的结尾值 =”EN” 的所有元素 |
| [attribute *= language] | [lang *= en] | 抉择一个 lang 属性的蕴含 ”EN” 的所有元素 |
伪类选择器
| 选择器 | 名称 | 备注 |
|---|---|---|
| :link | a:link | 抉择所有未拜访链接 |
| :visited | a:visited | 抉择所有拜访过的链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :active | a:active | 抉择正在流动链接 |
| :focus | input:focus | 抉择元素输出后具备焦点 |
伪元素选择器
| 选择器 | 名称 | 备注 |
|---|---|---|
| ::before/:before | 在被选元素前插入内容。 | 须要应用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 |
| ::after/:after | 在选被元素后插入内容 | 其用法和个性与:before 类似。 |
| ::first-letter/:first-letter | 匹配元素中文本的首字母。 | 被润饰的首字母不在文档树中。 |
| ::first-line/:first-line | 匹配元素中第一行的文本。 | 这个伪元素只能用在块元素中，不能用在内联元素中。 |