30s告诉你【伪类】与【伪元素】的区别

伪类(pseudo-classes)

其核心就是用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover。

伪元素(Pseudo-elements)

其核心就是需要创建通常不存在于文档中的元素，比如::before。

伪类与伪元素的区别

• 表示方法

CSS2 中伪类、伪元素都是以单冒号:表示，CSS2.1 后规定伪类用单冒号表示，伪元素用双冒号::表示，浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。对于 CSS2 之后所有新增的伪元素(如::selection)，应该采用双冒号的写法。但是因为兼容性问题，大部分还是用的单冒号。

• 定义不同

伪类即假的类，通常可以添加类来达到效果，伪元素即假元素，需要通过添加元素才能达到效果。来看下面的例子

例 1:将一行字符串的首字母变成红色

现在不用伪元素应该如何实现？用 CSS slector 选择？想了一晚上也没想出来，既然没法选择也就没法添加一个类来改变首字母的颜色。

  <p>I am snow</p>

添加元素试试，如下，创建一个元素 span 将首字母包裹起来，进而改变其颜色，成功了。这里，关键点在于我们创建了新的元素达到了::first-letter的作用，且不能通过添加其他类来实现这一效果，因此将::first-letter叫做伪元素而不是伪类。

  <p><span style={{ color: red }}>I<span/> am snow</p>

例 2: 如下要将 I am snow 这句话变为红色

很简单用:first-child，同样添加一个类试试，显然很容易达到同样效果，我们并没有创建新的元素只是添加了一个类.red-line，因此将:first-child叫做伪类而不是伪元素，尽管它和::first-letter在语义上十分相似。

  div:first-child {
   color: red;
  }
  或
  .red-line {
     color: red;
  }
  
  <div class='red-line'>
   <p>I am snow</p>
  <div>

结论

• 伪类和伪元素都是用来表示文档树以外的"元素"。
• 伪类和伪元素分别用单冒号:和双冒号::来表示。
• 伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类。

关于常用的伪类与伪元素选择器可以查看CSS选择器一文。