# CSS伪类与伪元素

`CSS`引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

## 伪类
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过`:hover`来描述这个元素的状态。虽然它和普通的`css`类相似，可以为已有的元素添加样式，但是它只有处于`dom`树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

### 状态性伪类
是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

* `:link` 应用于未被访问过的链接。
* `:hover` 应用于鼠标悬停到的元素。
* `:active` 应用于被激活的元素。
* `:visited` 应用于被访问过的链接，与`:link`互斥。
* `:focus` 应用于拥有键盘输入焦点的元素。

### 结构性伪类
`CSS3`新增选择器，利用`dom`树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少`class`和`id`属性的定义，使文档结构更简洁。

* `div:first-child` 选择属于其父元素的第一个子元素的每个`div`元素。
* `div:last-child` 选择属于其父元素最后一个子元素的每个`div`元素。
* `div:nth-child(n)` 选择属于其父元素的第n个子元素的每个`div`元素。
* `div:nth-last-child(n)` 同上，从这个元素的最后一个子元素开始算。
* `div:nth-of-type(n)` 选择属于其父元素第`n`个`div`元素的每个`div`元素。
* `div:nth-last-of-type(n)` 同上，但是从最后一个子元素开始计数。
* `div:first-of-type` 选择属于其父元素的首个`div`元素的每个`div`元素。
* `div:last-of-type` 选择属于其父元素的最后`div`元素的每个`div`元素。
* `div:only-child` 选择属于其父元素的唯一子元素的每个`div`元素。
* `div:only-of-type` 选择属于其父元素唯一的`div`元素的每个`div`元素。
* `:empty` 选择的元素里面没有任何内容。
* `:checked` 匹配被选中的`input`元素，这个`input`元素包括`radio`和`checkbox`。
* `:default` 匹配默认选中的元素，例如提交按钮总是表单的默认按钮。
* `:disabled` 匹配禁用的表单元素。
* `:enabled` 匹配没有设置`disabled`属性的表单元素。
* `:valid` 匹配条件验证正确的表单元素。

## 伪元素
用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过`::before`来在一个元素前增加一些文本，并为这些文本添加样式。  

`CSS3`规范中要求使用单冒号`:`用于`CSS3`伪类，双冒号`::`用于 `CSS3`伪元素，目的是区分伪类和伪元素。

* `::first-letter` 选择元素文本的第一个字。
* `::first-line` 选择元素文本的第一行。
* `::before` 在元素内容的最前面添加新内容。
* `::after` 在元素内容的最后面添加新内容。
* `::selection` 匹配用户被用户选中或者处于高亮状态的部分。
* `::placeholder` 匹配占位符的文本，只有元素设置了`placeholder`属性时，该伪元素才能生效。


## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```