伪类与伪元素有什么区别？ 我一脸蒙蔽

前言

每日学习一点，这不都就是希望。

笔者：在一次面试上突然被问到这两者的区别，缺不知道的回答，虽然我才工作一年，但是说实话工作一年来都是用vue、react等一些框架，一些底层或者html的知识都忘记了，今天就来好好补一补。

结论

先说结论伪类与伪元素的主要区别有以下几点

• 伪类是元素的一种状态 例如： hover(鼠标悬停) active(激活) 等等
• 伪元素是一种不存在于文档中的元素，并且可以为其样式(这也是为什么被称为伪元素)

伪类

伪类： 伪类是元素的一种状态，常用的主要有hover、 active 、 focus 、visited、 link、 not等等

其实伪类有很多，但是记住伪类的方法很简单伪类的写法都是单冒号+伪类名称

主要的伪类有：

:active
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-within
:host
:host()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:nth-last-child()
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
:where

伪元素

伪元素： 不存在与DOM树中的元素，它们可以想普通元素一样赋予样式，但是无法用过js等方式获取,见伪元素有 before，fter，first-letter，first-line等

::after (:after)
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
::slotted()
::spelling-error