伪类和伪元素是什么？如何区分？

很多同学在学习 CSS 样式表时，分不清伪类和伪元素。那么今天这篇文章 w3cschool 小编就来为大家介绍一下伪类和伪元素是什么？两者有什么区别。

伪类和伪元素概述

伪类

伪类是用来定义元素特殊状态的，他可以用来设置鼠标悬停样式、元素获取焦点样式、设置链接样式等。如常见的 hover、active、link 等都是伪类。

伪元素

伪元素也称为伪对象，它不存在于 DOM 文档中、是一个虚拟的元素。它可以用来代表某个元素的子元素，但是这个子元素并不存在于文档树中。

如何区分伪类和伪元素

伪类和伪元素的根本区别在于：是否创造了新的元素。

在 W3C 中，对伪类和伪元素的描述是这样的：伪类用于向某些选择器添加特殊的效果，而伪元素用于将特殊效果添加到某些选择器中，也就是说伪元素是对那些不能通过 class 或 id 等选择元素的补充。

我们来看下具体例子，当我们想设置以下代码中第一个 p 标签内的文本文字为红色。

<div>
    <p>红色</p>
    <p>黑色</p>
</div>

使用伪类的话,使用简单的代码就可以试下：

p:first-child{
    color:red;
}

而如果想要通过伪元素去设置的话，我们需要先为第一个 p 标签添加一个 class，再通过该 class 进行设置。如下：

<div>
    <p class="first-child">红色</p>
    <p>黑色</p>
</div>
p:first-child{
    color:red;
}

如上我们可以看出，如果可以直接使用伪类的话，方法较为简单。如果是使用伪元素的话则较为麻烦。在文章《伪类是什么？常用的伪类选择器有哪些？》中，为大家介绍了常用的伪类选择器有哪些，这里便不再重复叙述。

以上就是文章“伪类和伪元素是什么？如何区分？”的全部内容。更多 CSS 学习请前往 w3cschool。

推荐课程：CSS 入门课程、CSS 教程