前言

最近看一些前端面试题，经常有问到伪类和伪元素的作用以及两者区别，所以特意找了一些资料学习。下面是我对这一方面知识的理解和总结，可能会有遗漏或者一些出入，欢迎大家指正，相互交流～

伪类

A psuedo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.

MDN上面阐述的很明确，伪类就是一个选择处于特定状态的元素的选择器，比如某一个clsss的第一个元素，某个被hover的元素等等...，我们可以理解成一个特定的CSS类，但与普通的类不一样，它只有处于DOM树无法描述的状态下才能为元素添加样式，所以将其称为伪类

伪元素

Pseudo-elements behave in a similar way, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon ::

伪元素和伪类很像，但是伪元素类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态。注意了，这里是类似，而不是真的增加一个节点，这也是其被称为伪元素的原因（实质上，元素被创建在文档外）。

两者区别

伪类是操作文档中已有的元素，而伪元素是创建了一个文档外的元素，两者最关键的区别就是这点。此外，为了书写CSS时进行区分，一般伪类是单冒号，如:hover，而伪元素是双冒号::before。一般大部分伪类强制使用单冒号，大部分伪元素单冒号和双冒号都可以，但是为了区分，建议按照规范书写。

伪类和伪元素都有哪些？

伪类

选择器	作用
:avtive	匹配被用户激活的元素（比如点击）
:blank	匹配空的input
:checked	匹配被选中的radio或者checkbox
:disabled	匹配处于不可用状态的可交互元素
:empty	匹配没有子元素的元素
:enabled	匹配处于可用状态的可交互元素
:first-child	匹配在兄弟元素中处于第一的元素
:first-of-type	匹配在它的兄弟元素中是某个类型中的第一个的元素
:focus	匹配获取焦点的的元素
:focus-visible	匹配获取焦点且能被用户看到的元素
:hover	匹配用户在此悬停或者触摸的元素
:invalid	匹配处于不合法状态的元素，比如`<input>`正则校验不通过
:lang	根据文档语言匹配元素
:last-child	匹配在兄弟元素中处于最后的元素
:last-of-type	匹配在它的兄弟元素中是某个类型中的最后一个的元素
:link	匹配没有被访问过的链接
:is()	匹配符合结果的元素
:not()	匹配符合结果之外的元素
:nth-child(n)	匹配父元素的第n个子元素。n可以是一个数字、一个关键字或一个公式
:nth-of-type(n)	匹配父元素的某种类型元素中的第n个子元素。n可以是一个数字、一个关键字或一个公式
:nth-last-child(n)	与nth-child()类似，从后往前数
:nth-last-of-type(n)	与nth-last-of-type-child()类似，从后往前数
:only-child	匹配没有兄弟元素的元素
:only-of-type	匹配一个元素，该元素是其兄弟元素中唯一的一个类型。
:placeholder-shown	匹配显示默认占位符的表单元素
:required	匹配内容为必填的表单元素
:root	匹配根元素
:valid	匹配处于合法状态的元素
:target	匹配符合当前url的锚点元素
:visited	匹配被访问过的元素

伪元素

选择器	作用
::before	匹配在原始元素的实际内容之后出现的区域
::after	匹配在原始元素的实际内容之前出现的区域
::first-letter	匹配元素的第一个字母
::first-line	匹配元素第一行
::selection	匹配被选中的文本或者区域

参考资料