CSS伪类和伪元素🎉#

CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。比如，一句话中的第一个字母，或者是列表中的第一个元素。

CSS3规范中要求使用:用于CSS3伪类，双冒号::用于CSS3伪元素，以区分伪类和伪元素。

引用标准中的话:

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
(CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。)

伪类#

TIP
伪类用于当已有元素处于的某个状态是，为其添加特定的样式，这种状态更具用户行为动态变化。比如，当用户悬停在指定元素时，可以通过:hover来描述元素的这个状态。虽然他和css普通的类相似，不过它只有处于dom树无法描述的状态下才能为元素添加样式。

状态性伪类#

:link: 未访问过的链接
:hover: 鼠标悬停的元素
:active: 被激活的元素
:visited: 被访问过的链接
:focus: 拥有键盘输入焦点的元素

结构性伪类#

TIP
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:only-child: 选择属于其父元素的唯一子元素的每个div元素
:empty: 选择的元素里面没有任何内容
:checked: 匹配被选中的input元素，这个input元素包括radio和checkbox
:default: 匹配默认选中的元素，例如提交按钮总是表单的默认按钮
:disabled: 匹配禁用的表单元素
:enabled: 匹配没有设置disabled属性的表单元素
:valid: 匹配条件验证正确的表单元素
… …

伪元素#

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

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