伪类与伪元素的区别-杨标的博客

伪类与伪元素的区别

之前给同学们讲过，伪类与伪元素其实就是一些特殊的状态与特殊的位置。其实这个说法只是片面的，我们应该以一个更严格的角度去看待这个问题

在很多情况下，CSS中伪类与伪元素的概念是很容易混淆的，有很多人都以为伪类与伪元素是一个概念，这个理解是错误的，现在，我们来看一下，这两者之间的区别

伪类与伪元素其实可以看成是伪class与伪标签

在官方的W3C的定义标准里，是做出了这样的定义

通过案例来实现伪类与伪元素的区别

<p>
    <em>My</em>
    <em>name is BiaoGege</em>
</p>

现在如果想实现上面的效果，应该怎么办呢？

p>em:first-child{
    color: red;
}

我们使用选择器:first-child就可以实现上面的效果了

但是这个时候想象一下，如果没有:first-child这一个选择器，我们又应该怎么办？

<style>
	.a{
        color: red;
    }
</style>
<p>
    <em class="a">My</em>
    <em>name is BiaoGege</em>
</p>

这个时候，我们在第一个em标签上面添加了一个class样式，取名为a，同时书写了a的这个样式，这样也可以实现这样一个效果

通过上面的对比我们可以发现，原来需要通过class类选择器去实现的效果，现在在这里我们已经可以直接使用:first-child来实现了，那么我们就把这个:first-child叫伪类选择器

同样的代码，如果我们现在需要实现下面的效果，又应该怎么办呢？

p::first-letter {
    color: red;
}

我们在这里使用了::first-letter这样的一个选择器去完成，同理，如果现在没有::first-letter这个选择器，我们又应该如果去实现这个效果呢？

<style>
	p>em>span{
        color: red;
    }
</style>
<p>
    <em><span>M</span>y</em>
    <em>name is BiaoGege</em>
</p>

我们在M这个英文单词这里添加了一个标签将它进行了包裹，然后使用选择器p>em>span去找到这个元素，再去给它添加相应的样式，这样也可以达到效果

这个时候我们对比发现::first-letter其实就相当于在M这个字母上面添加了一个标签（而标签也叫元素），所以first-letter我们也叫它伪元素

伪类最开始的时候只是用来表示元素的动态（典型的锚伪类link、visited、hover、active） ,只是在CSS3的标准出来了以后，我们发现，有些伪类不仅仅是用来描述状态，可能还要改变元素的结构，这个时候，就衍生出了“伪元素”这个选择器