一篇文章带你学会css中的伪类和伪元素

我们在写页面的时候，为了美化页面，肯定会使用css样式进行美化，美化的过程中我们会经常使用伪类和伪元素，接下来来说说这两者的定义，常见的使用，在什么场景使用，二者有有什么区别

一、伪类

（1）定义

“伪类主要用于定义元素的特殊状态。它们不是类，而是表示了元素处于特定状态时的样式变化。”

通俗来说，伪类依附于已存在的元素，使用冒号（:）作为标识，描述元素某特性或状态下的样式

（2）伪类（标红的是常见使用）

:hover - 鼠标悬停状态
:active -鼠标点击(按下不放)时激活
:focus - 获得焦点
:visited-已访问的链接(a标签)
:link - 未访问的链接(a标签)
·first-child- 第一个子元素
:last-child- 最后一个子元素
:nth-child() - 指定索引的子元素
:nth-last-child() - 指定索(反向)的子元素
:only-child - 仅有一个子元素
:empty- 没有子元素
:checked- 勾选状态的表单元素
:disabled- 禁用状态的表单元素
:enabled- 可用状态的表单元素
:required-需要填写的表单元素
:valid- 验证通过的表单元素
:invalid-验证未通过的表单元素
:target - 当前活动的目标
:first-of-type - 相同类型的第一个元素
:last-of-type - 相同类型的最后一个元素
:nth-of-type()- 相同类型的指定索引
:nth-last-of-type() - 相同类型的指定索(反向
:not()- 不匹配给定选择器
:root - 文档根元素
:lang() - 指定语言

（3）使用场景

伪类适用于需要基于元素状态来改变样式的场景。

例如，可以使用:hover伪类来改变鼠标悬停在元素上时的样式，使用:active伪类来改变元素被激活（如点击）时的样式，或者使用:first-child伪类来选择属于其父元素的第一个子元素。

二、伪元素

（1）定义

伪元素用于创建一些不在文档树中的元素，并为其添加样式。这些元素实际上并不存在于HTML文档中，而是由CSS创建和管理的。

通俗来说，伪元素则使用双冒号（::）作为标识，一般用户创建虚拟元素并定义其样式。

（2）伪元素（标红的是常见使用）

::before -- 在元素内容前插入一个虚拟元素
::after -- 在元素内容后插入一个虚拟元素
::first-line -- 选择元素的第一行文本
::first-letter -- 选择元素的第一个字母或第一个字符
::selection -- 选择用户选中的文本
::placeholder -- 选择表单元素的占位符文本
::marker -- 选择列表项的标记部分
::backdrop -- 选择对话框背景元素
::cue -- 选择音频和视频元素的字幕和注释

（3）使用场景

伪元素适用于需要在元素内容前后添加额外内容或样式的场景。

例如，可以使用::before伪元素在元素内容之前插入文本或图标，使用::after伪元素在元素内容之后插入文本或图标。

三、两者不同之处

（1）作用对象不同

伪类是基于元素的特定状态或上下文条件来选择元素的，它们不会影响DOM内容。

伪元素则是给DOM元素内部添加内容和属性，可以看作是添加一个无法被选中的节点或者属性。

（2）语法表示不同

伪类通常用一个冒号（:）来表示，而伪元素在CSS3及以后的版本中使用双冒号（::）来表示

注意：伪类选择器可以链式拼接，伪元素不支持链式写法

在伪类的后面可以链式写个伪元素，而伪元素不支持再链式写个伪类

（3）使用场景不同

伪类主要用于描述元素的特定状态或上下文条件，并基于这些条件来改变样式。

伪元素则用于在元素内容前后插入新的内容或样式，或者为元素的特定部分（如第一个字母、第一行等）添加样式。