伪元素和伪类

伪元素

伪元素：添加了页面中没有的元素，不存在于DOM文档中，是虚拟的元素，创建的新元素。
作用于元素一部分
代表某个元素的子元素，这个子元素虽然在逻辑上存在，但并不存在于文档树中。
使用 2 个冒号
常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等等；

<style>
     p::first-letter{color: red;}
</style>

 <div>
       <p>hhhh</p>
       <p>0000</p>
   </div>

伪元素.png

伪类

伪类是给页面中已经存在的元素添加一个类。
伪类使用1个冒号
常见的有：:hover，:link，:active，:target，:not()，:focus等。

  <style>
     p:first-child{color: red;}
  </style>

   <div>
       <p>hhhh</p>
       <p>0000</p>
   </div>

伪类.png