选择器的类型
- 基本选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
1. 基本选择器
| 选择器 | 含义 | 作用 |
| .class | 类选择器 | 选择class包含特定类的元素 |
| .#id | id选择器 | 选择包含特定id的元素 |
| * | 通用元素选择器 | 选择页面中所有的元素 |
| E | 元素选择器 | 选择指定类型的HTML元素（如p,img） |
| select1 ,select2 | 群组选择器 | 将具有相同属性的元素合并 |
2. 层次选择器
| 选择器 | 含义 | 作用 |
| E F | 后代选择器（包含选择器） | 选择E标签下的所有F元素 |
| E>f | 子选择器 | 仅选择E标签下的儿子级别的元素 |
| E+F | 相邻兄弟选择器 | 选择与E元素同级别的第一个F元素 |
| E~F | 普通相邻选择器 | 选择与E元素同级别的所有F元素 |
3. 伪类选择器
3.1. 动态伪类选择器
| 选择器 | 含义 | 作用 |
| E:link | 链接伪类选择器 | 选择匹配的E元素，E被定义了超链接且并未访问过。常用与链接锚点 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素，E被定义了超链接且已被访问。常用与链接锚点 |
| E: active | 用户行为伪类选择器 | 选择匹配的E元素，且匹配元素已被激活。常用与锚点与按钮上 |
| E:hover | 用户行为伪类选择器 | 选择匹配的E元素，且用户鼠标停留在E元素上 |
| E:hover | 用户行为伪类选择器 | 选择匹配的E元素，且匹配的元素获得焦点 |
3.2. 目标伪类选择器
| 选择器 | 含义 | 作用 |
| E:target | 选择匹配E的所有元素，且匹配元素指向被相关的URL指向 |
3.3. UI元素状态伪类选择器–主要与表单相关
| 选择器 | 示例 | 作用 |
| :disable | input:disable | 选择所有禁用的表单元素 |
| :enable | input:disable | 选择没有设置disable属性的表单元素 |
| :in-range | input:in-range | 选择指定区域内的元素 |
| :out-of-range | input:out-of-range | 选择不再指定区域内的元素 |
| :valid | input:valid | 选择条件验证正确的表单元素 |
| :invaild | input:invalid | 选择条件验证错误的表单元素 |
| :required | input:required | 选择设置 required 属性的表单元素 |
| :checked | input:checked | 匹配被选中的 input 元素，input 元素包括 radio 和 checkbox |
| :read-only | input:read-only | 选择设置 readonly 只读属性的元素 |
3.4. 语言伪类选择器
| 选择器 | 含义 | 作用 |
| :lang(language) | 匹配设置了特定语言的元素。 | 设置特定语言可以通过为了 HTML 元素设置 lang=”” 属性，设置 meta 元素的 charset=”” 属性，或者是在 http 头部上设置语言属性。实际上，lang=”” 属性不只可以在 html 标签上设置，也可以在其他的元素上设置。 |
3.5. 结构化类选择器
| 选择器 | 示例 | 作用 |
| E:root | 选择匹配E元素所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型的选择器匹配的内容相同 | |
| :first - child | p:first-child | 选择p元素的第一个子元素 |
| :first-of-type | p:first-of-type | 选择每个父元素是p元素的第一个p子元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not§ | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有p元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
4. 伪元素选择器
4.1. 单双冒号
| 选择器 | 作用 | 说明 |
| ::before/:before | 在被选元素前插入内容。 | 需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 |
| ::after/:after | 在选被元素后插入内容 | 其用法和特性与:before相似。 |
| ::first-letter/:first-letter | 匹配元素中文本的首字母。 | 被修饰的首字母不在文档树中。 |
| ::first-line/:first-line | 匹配元素中第一行的文本。 | 这个伪元素只能用在块元素中，不能用 |
4.2. 仅双冒号
| 选择器 | 作用 | 说明 |
| ::selection | 匹配被用户选中或者处于高亮状态的部分。 | 在火狐浏览器使用时需要添加 -moz 前缀。 |
| ::placeholder | 匹配占位符的文本。 | 只有元素设置了 placeholder 属性时，该伪元素才能生效。该伪元素不是 CSS 的标准，它的实现可能在将来会有所改变， |
| ::backdrop | 用于改变全屏模式下的背景颜色。 | 全屏模式的默认颜色为黑色。(试验阶段) |
5. 属性选择器
| 选择器 | 含义 | 作用 |
| E[attribute] | [target] 选择所有带有target属性元素 | |
| E[attribute=value] | [target=-blank] | 选择所有使用target="-blank"的E元素 |
| E[attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有E元素 |
| E[attribute ^= language] | [lang ^= en] | 选择一个lang属性的起始值="EN"的所有E元素 |
| E[attribute $= language] | [lang $= en] | 选择一个lang属性的结尾值="EN"的所有E元素 |
| E[attribute *= language] | [lang *= en] | 选择一个lang属性的包含"EN"的所有E元素 |
