Pseudo elements伪元素与Pseudo classes伪类

伪类和伪元素用于css选择器，利用他们使css更灵活。

常见的伪元素

::after

::after用于描述处于css渲染层的一个伪元素，相当于选中元素的最后一个子元素，但这个元素与DOM节点无关，位于选择的元素之后，伪元素的内容用content属性描述。

::before

与after相对应，相当于被选中元素的第一个子元素。

::selection

将用户选择的内容作为伪元素。

::first-letter

选中第一个字符作为伪元素。但只能用于块级元素，并且第一个字符前不能有图片或内联表格。

::first-line

选中第一行作为伪元素，只能用于块级元素（行内元素也用不着这个说法…）。

常见的伪类

伪元素与伪类的区别

伪元素将元素的某些部分作为元素选中（但不选中真正的元素），而伪类对应选择的元素的特殊状态（选择真正的元素）。

w3c的定义是，伪类用于向某些选择器添加特殊的效果（选择器已选中元素），伪元素用于将特殊效果添加到选择器（通过伪元素才能确定选中元素）。

更直观的理解是，伪元素达到的效果必须通过添加真实的元素替代，而伪类达到的效果必须通过添加真实的类替代。

:hover

鼠标悬停于某一元素时生效。

:active

通常用于<a>和<button>，对应鼠标按下时的状态。

:link

匹配未访问过的链接，要求具有href属性的<a><area><link>元素。

:focus

被聚焦的状态，通常用于<input>元素。

:first-child

选择一组兄弟元素中的第一个元素。

:first-of-type

选择一组兄弟元素中的第一个指定类型的元素（可以不是第一个元素）。

:root

匹配文档树的根元素，在HTML文档中匹配html元素