总结伪类与伪元素

1.伪类与伪元素.
先说一说为什么 css 要引入伪元素和伪类，以下是 章节中伪类和伪元素的描述：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

2. 伪类与伪元素的区别
这里通过两个例子来说明两者的区别。

下面是一个简单的 html 列表片段：

<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个

• 添加一个类，并在该类中定义对应样式：
  HTML:

• <ul>
      <li class="first-item">我是第一个</li>
      <li>我是第二个</li>
  </ul>
  

  :CSS:

  li.first-item {
      color: orange
  }
  

  下面是另一个简单的 html 段落片段：

  <p>Hello World, and wish you have a good day!</p>
  

  如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个 元素，并设置该 span 元素的样式：
  HTML:

  
  <p><span class="first">H</span>ello World, and wish you have a good day!</p>
  

  CSS:

  .first {
      font-size: 5em;
  }
  

  如果不创建一个 元素，我们可以通过设置

  的:first-letter 伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的 元素并添加了样式，但实际上文档树中并不存在这个 元素。
  HTML:

  <p>Hello World, and wish you have a good day!</p>
  

  CSS:

  
  p:first-letter {
      font-size: 5em;
  }
  

  从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

  3. 伪元素是使用单冒号还是双冒号？

  CSS3 规范中的要求使用双冒号 (:

  标签：总结,冒号,伪类,元素,child,文本,橙色
  来源： https://blog.csdn.net/m0_55870194/article/details/114973425