为什么要引入伪类呢？

官方解释是伪类和伪元素概念的引入是为了格式化文档树以外的信息。简单来说，可以把伪类和伪元素理解为“加强版的选择器”，比如用来选择一句话的第一个字母，列表中的第一个元素。

在CSS3标准中，伪类前加单冒号，伪元素前加双冒号。

伪类和伪元素的区别通过例子可以体现：

伪类:fist-child

比如有两行文本，分别是first和second。要实现对第一行变红色。

<div>
    <p>test1</p>
    <p>test2</p>
</div>

使用伪类：

p:first-child{color:red}

不使用伪类：

<div>
    <p class="test">test1</p>
    <p>test2</p>
</div>

.test{color:red}

伪元素::first-letter

实现对文本的第一个元素上色。

使用伪元素：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       p::first-letter{color:red}
    </style>
</head>
<body>

<div>
    <p>test</p>
</div>
</body>

不使用伪元素

需要给文本的第一个字母添加一个span标签，然后再设计样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .test{color:red}
    </style>
</head>
<body>

<div>
    <p>
        <span class="test">t</span>est
    </p>
</div>
</body>

伪类和伪元素的区别

从上面的例子可以看到，

伪类只是把想要的元素区分出来，不需要再创建新元素；

伪元素需要创建一个新元素。这是两者最大的区别

直观理解：伪类只需要添加一个类名,伪元素需要添加一个新元素，比如span。这样比较容易理解记忆

常用伪类：

当鼠标悬浮在元素上方时，给元素添加样式	:hover
给元素的第一个子元素添加样式	:first-child
给访问过的链接添加样式	:visited
给未被访问的链接添加样式	:link
给元素的最后一个子元素添加样式	:last-child

常用伪元素：

::before	在元素前插入内容
::after	在元素后插入内容
::first-letter	选择元素文本的首字母
::selection	当元素处于高亮状态时触发
::first-line	选择元素文本的首行

简单理解伪类和伪元素