伪类和伪元素

伪元素(Pseudo-elements) 和 伪类(Pseudo-classes)

伪元素

伪元素是创造DOM之外的对象
伪元素可以为一些在源文档中不存在的内容分配样式。
伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

用法

是2个以冒号::作为前缀，被添加到一个选择器末尾的关键字，例如：::before 或者 ::after。

伪元素	功能描述	level
::after	用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素	2
::before	创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。	2
::first-letter	选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容	1
::first-line	在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小	1

伪类

CSS伪类是用来添加一些选择器的特殊效果。
伪类是基于元素的特征而不是他们的id、class、属性或者内容。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式，所以它是基于文档之外的抽象。

用法

是一个以冒号:作为前缀，被添加到一个选择器末尾的关键字，例如：:active :hover :link :visited。

伪类	描述	level
:first-child	父元素的第一个子元素	2
:last-child	父元素的最后一个子元素	2
:nth-child()	找到所有当前元素的兄弟元素中符合条件的元素，例如2n+1就是查找1，3，5，7等	3