伪类和伪元素用于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元素

更多伪类

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes