CSS 基础系列：伪类和伪元素
1.伪类和伪元素的引入
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
2.伪类和伪元素的概念
2.1 伪类：
伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
例如，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
2.2 伪元素
伪元素用于创建一些不在文档树中的元素，并为其添加样式。
例如，我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
3.伪类列举
3.1 状态伪类
状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式就会失去。状态伪类的顺序很重要，顺序错误可能会导致没有效果。通常的建议是LVFHA，即-----link，visited，focus，hover，active。
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问的链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :hover | a:hover | 选择鼠标悬空的链接 |
| :active | a:active | 选择正在活动的链接 |
| :focus | input:focus | 选择获得焦点的输入框 |
3.2 结构化伪类
结构化伪类是 CSS3 新增选择器，利用 DOM 树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少 class 和 id 属性的定义，使文档结构更简洁。
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :first-child | p:first-child | 选择符合的p元素，该p元素必须是其父元素的第一个子元素 |
| :first-of-type | p:first-of-type | 选择符合的p元素，该p元素必须是其父元素的第一个p子元素 |
| :last-child | p:last-child | 选择符合的p元素，该p元素必须是其父元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择符合的p元素，该p元素必须是其父元素的最后一个p子元素 |
| :not(selector) | :not§ | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择符合的p元素，该p元素必须是其父元素的第2个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择符合的p元素，该p元素必须是其父元素的倒数第2个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择符合的p元素，该p元素必须是其父元素的倒数第2个p子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择符合的p元素，该p元素必须是其父元素的第2个p子元素 |
| :only-of-type | p:only-of-type | 选择符合的p元素，该p元素的父元素可以有多个子元素，但是类型为p的子元素只有一个 |
| :only-child | p:only-child | 选择符合的p元素，该p元素的父元素只有一个子元素，就是该p元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
3.3 表单相关
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :enabled | input:enabled | 选择没有设置disabled属性的表单元素 |
| :in-range | input:in-range | 选择在指定区域内的表单元素 |
| :out-of-range | input:out-of-range | 选择不在指定区域内的表单元素 |
| :valid | input:valid | 选择条件验证正确的表单元素 |
| :invalid | input:invalid | 选择条件验证错误的表单元素 |
| :required | input:required | 选择设置required属性的表单元素 |
| :optional | input:optional | 选择没有required属性，即设置 optional属性的表单元素 |
| :read-only | input:read-only | 选择设置只读属性的表单元素 |
| :read-write | input:read-write | 选择处于编辑状态的元素；input，textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态 |
| :checked | input:checked | 匹配勾选的input元素，input元素包括 radio 和 checkbox |
| :empty | p:empty | 匹配所有没有子元素的 p 元素 |
| :default | 匹配默认选中的元素(提交按钮总是表单的默认按钮) | |
| :indeterminate | 当某组中的单选框或复选框还没有选取状态时，:indeterminate 匹配该组中所有的单选框或复选框。 | |
| :scope | 匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时，style 内的样式会对整个 html 起作用。(试验阶段) |
3.4 语言相关
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :lang(language) | 匹配设置了特定语言的元素 | 设置特定语言可以是：HTML元素设置lang=" “属性，meta元素设置charset=” “属性，或者是在 http头部上设置语言属性。实际上，lang=” " 属性不只可以在 html 标签上设置，也可以在其他的元素上设置。 |
| :dir | 匹配指定阅读方向的元素。 | 当 HTML 元素中设置了 dir 属性时该伪类才能生效。现时支持的阅读方向有两种：ltr（从左往右）和 rtl（从右往左）。目前，只有火狐浏览器支持 :dir 伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )(试验阶段)。 |
3.5 其他
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :root | 匹配文档的根元素 | 一般的 html 文件的根元素是 html 元素。 |
| :fullscreen | 匹配处于全屏模式下的元素 | 全屏模式不是通过按 F11 来打开的全屏模式，而是通过 Javascript 的 Fullscreen API 来打开的，不同的浏览器有不同的 Fullscreen API。目前，:fullscreen 需要添加前缀才能使用。 |
！！注意，伪类的名称不区分大小写。
4 伪元素列举
4.1 单双冒号
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| ::before/:before | 在被选元素前插入内容 | 需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 |
| ::after/:after | 在被选元素后插入内容 | 用法同上 |
| ::first-letter/:first-letter | 匹配元素中文本的首字母 | 被修饰的字母不在首字母中 |
| ::first-line/:first-line | 匹配元素中第一行的文本 | 这个伪元素只能用在块元素中，不能用在内联元素中 |
4.1 仅双冒号
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| ::selection | 匹配被用户选中或者处于高亮状态的部分 | 在FF浏览器使用时需要添加 -moz 前缀 |
| ::placeholder | 匹配占位符的文本 | 只有元素设置placeholder 属性时，该伪元素才能生效。该伪元素不是 CSS 的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。在一些浏览器中（IE10 和 Firefox18 及其以下版本）会使用单冒号的形式 |
| ::backdrop | 用于改变全屏模式下的背景颜色 | 全屏模式的默认颜色为黑色。(试验阶段) |
5. :first-child和:first-of-type的区别
:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：
p:first-child: 匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child: 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child: 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
:first-child: 匹配到的是p元素,因为在这里div的第一个子元素就是p。
然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？还是看那段代码：
p:first-of-type: 匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；
h1:first-of-type: 匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；
span:first-of-type: 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是第一个。
:first-of-type: 匹配到的是p元素
所以，通过以上两个例子可以得出结论：
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。