前端---css通俗易懂理解伪类和伪元素的区别

在今天制作一个页面的时候碰到一个::after和::before的东西,以前只知道这是一种选择器,至于具体该怎么用忘记掉了,又通过这个找到一些伪类和伪元素的概念,看完觉得有点摸不着头脑,现在想给大家浅显的说明白什么是伪类,什么是伪元素以及分别有什么用?

首先,之前不太了解伪类和伪元素概念的同学可以详细的去看一下这篇博客:

https://www.cnblogs.com/ammyben/p/8012747.html

再来这里深刻体会一下,详细肯定就能掌握了,如果之前已经还算比较了解伪类和伪元素可以直接来看我这篇文章

伪类  伪元素:

CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化       //就是实现我们通过class id等元素对属性进行补充的时候采取的一种策略.

 区别:

我们先引入一个例子:

<p>
    <span>Hello</span>
    <span>html,css,js!</span>
</p>

很明显它会输出一个  Hello html,css,js!

如果我们想要第一个span标签字体颜色变红怎么做呢 
使用我们熟悉的伪类选择器很简单

 

span:first-child {
    color: red;
}

就会变成  Hello html,css,js!

但是如果不存在伪类我们怎么做呢
这是我们就需要为第一个span标签添加简单类选择器

<p>
    <span class="fc">Hello</span>
    <span>html,css,js!</span>
</p>

span.fc {
    color: red;
}

可以实现同样的效果

这时倘若我们要让第一个单词Hello中的H变红要怎么做呢

这回我们需要使用伪元素

p::fl {
    color: red;
}

 就会变成  Hello html,css,js!

 

同样假设伪元素不存在的情况
这时我们只能嵌套span标签来实现

<p>
    <span><span>H</span>ello</span>
    <span>html,css,js!</span>
</p>

p span {
    color: red;
}

 

伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
伪类和伪元素本质区别的就是是否抽象创造了新元素

最后,需要注意的是"伪元素在一个选择器中只能出现一次，并且只能出现在末尾",而"伪类可以在选择器中出现多个".