伪类与伪元素的区别

伪类与伪元素，傻傻分不清楚。

伪类(pseudo-classes)

官方定义:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

其核心就是用来选择那些不可以被普通选择器选择的文档以外的元素，好比:hover。

伪元素(Pseudo-elements)

官方定义:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document.

其核心就是须要建立一般不存在于文档中的元素，好比::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选择器一文。