伪元素和伪类的概念和区别

目录

伪类

伪元素

 区别：

对于区别的解释：

伪类

这是菜鸟教程下方的一个笔记，看着多但是干货满满。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

个人解析：动态变化的？？？   比如使用:frist-child，当我们设定一个元素为红色时，同时我们又创建了一个新的节点，在该元素之前，那么红色将转移到新创建的节点身上，所以并不是固定的。相反使用id,class等直接绑定就是固定的，再比如:link，这个样式也是动态的，可能发生也可能不发生（如果点击了，或者悬浮了就是另外一种状态了）——其实针对的是某一个元素节点（具体哪一个可能状态变化也可能节点变化）

---

常见的伪类

属性	描述
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:lang	向带有指定lang属性的元素添加样式

---

---

---

伪元素

与伪类针对特殊状态的元素不同的是，伪元素是对 元素中的 特定内容 进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

个人解析：伪元素是对元素节点特定内容的操作，普通选择器是无法对元素内容操作的，这就是伪元素的特点，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行...

常见的伪元素：

属性	描述
::after	在元素之后插入内容
::before	在元素之前插入内容
::first-letter	选中该元素的首字符
::first-line	选中该元素的首行
::selection	选择用户选择的元素部分

 区别：

伪类	伪元素
：	:: 或 :
没有创造新元素（抽象）	创造了新元素（抽象）
主要针对的是元素节点	主要针对的是元素的内容

对于区别的解释：

        举例：我们要实现如下功能

 使用伪类：

我们可以看到相对于不使用伪类，并不需要生成新的元素节点（抽象）

使用伪元素如何实现？

 但是如果不使用伪元素，如何实现？

 这里我来解释一下为什么要加span这种标签而不是直接给h4带类名，原因是因为，我们要模拟伪元素的状态，伪元素是针对元素内容的改变，如果我们想要内容的第一个或者第一个字改变颜色，直接加类名是无法实现的。

我们发现，如果想要实现和伪元素相同的效果，是需要增加节点元素的，实际上伪元素就抽象了增加了一个节点。