伪类和伪元素的区别

最新推荐文章于 2024-08-12 12:31:02 发布

幼儿园编程

最新推荐文章于 2024-08-12 12:31:02 发布

阅读量114

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_34871739/article/details/114174517

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

作为前端开发者经常会遇到伪类和伪元素的问题，因此最近查看了一些关于两者的文章，对于伪类和伪元素有了一些自己的理解，在这里记录一下。

首先去看了一下w3c上面的解释：

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

呃…说实话这两句话解释的有点让人看不明白，无法理解这两者到底有什么区别，唯一能明白的是伪类和伪元素都是为了增加一些特殊效果而存在的。只不过这两者在添加特殊效果上面有什么不同呢？

我又去MDN上面找了找，在这里找到了更通俗的解释：

伪类：

伪类在MDN中的解释为：

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

重点在于那句：“它们表现得会像是你向你的文档的某个部分应用了一个类一样”，这句话可以理解为伪类来添加特殊效果的方式就像是给元素写了一个专门的类。我们可以通过实际例子来理解：

<div>
	<p>我是伪类</p>
	<p>我是伪元素</p>
</div>

比如上面两段话，如果我们想要让第一段是红色，正常来写应该是给第一个p标签添加样式：

<style>
    .one {
        color: red;
    }
</style>
<div>
    <p class="one">我是伪类</p>
    <p>我是伪元素</p>
</div>

那如果不用这种方式呢？就可以使用伪类中的:first-child来实现，他的作用是将特殊样式添加到元素的第一个子元素。如：

<style>
    div>p:first-child {
        color: red;
    }
</style>
<div>
    <p>我是伪类</p>
    <p>我是伪元素</p>
</div>

结果为：
在这里插入图片描述
可以看出通过伪类选择器一样可以实现同样的效果。这样就能很好的理解那句话了，伪类可以避免给元素一个实际的类而且仍然能达到一样的效果。这样就不需要给一些元素添加专门的类来改变样式了。

伪类也常常用来实现一些动作效果，如:hover。表现方式为当用户对某个元素有了交互动作时，该元素就像被新加了一个类来实现效果。在MDN上面这种伪类被称为用户行为伪类。

伪元素

再来聊聊伪元素，伪元素和伪类有些类似，不过表现形式不是往元素上添加类，而是向文本中添加新的HTML元素。通过举例来说明：
在这里插入图片描述
如果我们要实现上图这种在元素内加一个三角形的效果来做开关的小图标，正常来写应该是在元素内再加一个元素，如：

<style>
.one {
    width: 200px;
    height: 100px;
    background-color: rosybrown;
}
.two {
    width: 0;
    height: 0;
    margin-left: 50px;
    border: 50px solid transparent;
    border-left-color: yellow;
}
</style>
<div class="one">
    <div class="two"></div>
</div>

而通过伪元素来实现的话，可以通过::after来达到相同的效果，如：

<style>
.one {
    width: 200px;
    height: 100px;
    background-color: rosybrown;
}
.one::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 50px;
    border: 50px solid transparent;
    border-left-color: yellow;
}
</style>
<div class="one"></div>