伪类和伪元素的区别

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

问题

什么是伪类？什么是伪元素？ 我经常会被这两个名词给搞混了，今天来好好复习一下，看看如何来区分它们。

定义

什么是伪类？

伪类是用于选择特定状态的元素，比如hover(滑过元素)， 比如first-child（父元素下的第一个子元素）等。这些都是针对存在的元素。

例子：

  <div>123</div>
  <style>
    div:hover {
      color: red;
    }
  </style>

什么是伪元素？

我们最熟悉的伪元素应该就是before,after了。它们可以创造出原本在dom tree中不存在的元素。

例子：

  <div></div>
  <style>
    div::before {
      content: '123';
      display: block;
    }
  </style>

常见的伪类

伪类	描述
:hover	元素滑过时匹配
:active	元素激活（比如点击）时匹配
:focus	元素聚焦时时匹配
:visited	链接被访问过匹配
:first-child	匹配子元素里的第一个元素
:first-of-type	匹配同一个类型的子元素里的第一个元素
:not()	匹配不符合括号里规则的元素

常见的伪元素

伪类	描述
::before	匹配元素前的元素
::after	匹配元素后的元素
::first-letter	匹配第一个字母
::first-line	匹配第一行
::selection	被选中的文本（比如鼠标选中）

区别

1. 伪类一般是单冒号:，伪元素是双冒号::。不过之前伪元素是用单冒号，所以目前浏览器为了保持兼容，伪元素单双冒号都可以。

   <!-- 伪类只能单冒号-->
   <style>
     div:hover {
       color: red;
     }
   </style>
   
   <!-- 伪元素单双冒号均可，推荐双冒号-->
   <style>
    <!-- 双冒号 -->
     div::before {
       content: '123';
       display: block;
     }
     <!-- 单冒号 -->
     div:before {
       content: '123';
       display: block;
     }
   </style>
   

2. 伪类可以同时使用多个，而伪元素同时只能用一个

   <style>
     <!-- 可以 -->
     div:hover:actived {
       color: red;
     }
   </style>
   
   <style>
     <!-- 可以 -->
     div::before {
       content: '123';
       display: block;
     }
     <!-- 不可以 -->
     div::before::before {
       content: '123';
       display: block;
     }
   </style>