CSS中伪元素和伪类的区别

伪元素和伪类比较容易混淆，视觉上为了区分两者，CSS3规定伪元素用双冒号表示，伪类用单冒号表示。伪元素包括但不限于::before、::after、::first-line、::first-letter，伪类包括但不限于:link、:visited、:hover、:active、:focus、:first-child、:nth-child(n)

以::first-line和:first-child为例说明：伪元素表示的是元素，但是这种元素特殊之处在于无法在DOM结构中表示，所以是伪元素。::first-line表示选中段落中的第一行文本元素，这种特殊性的选择在DOM中没法体现，除非手动为第一行文本添加一个标签；伪类表示的是一个类选择器，但是这种类选择器不需要你显式的添加class，所以是伪类。:first-child表示选中第一个子元素，你不需要为这个子元素添加class就能选中它

伪元素示例

<style>
  .box {
    width: 100px;
    height: 100px;
    background: teal;
  }
  .box::first-line {
    color: red;
  }
</style>
<p class="box">文本文本文本文本文本文本文本文本文本</p>

伪类示例

<style>
  li:first-child {
    color: red;
  }
</style>
<ul>
  <li>one</li>
  <li>two</li>
</ul>