前端 | CSS 伪元素、伪类是什么？他们的区别在哪里你知道吗？

一、伪元素和伪类介绍

什么是伪元素？

伪元素 是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

eg：下例中的 ::first-line伪元素可改变段落首行文字的样式。

HTML:

<p class="content">
       我们在这里放一下段落abc <br>
       这是第二行<br>
       这是第三行
   </p>

CSS:

.content::first-line {
      font-weight: bold;
      color: rebeccapurple;
      text-transform: uppercase;
  }

运行结果：

img

什么是伪类？

伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

​ eg：例如，**:hover** 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

HTML：

<button class="btn">按钮</button>

CSS：

.btn:hover {
      color: blue;
}

运行结果：

img

注意：

• 与伪类相比，伪类能够根据元素状态改变元素样式。
• 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
• 按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

二、伪元素和伪类的区别

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

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