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

猿友 2021-05-27 17:15:22 浏览数 (6572)
反馈

很多同学在学习 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 教程

CSS

0 人点赞