目 录CONTENT

文章目录

伪类与伪元素的区别

Administrator
2020-07-24 / 0 评论 / 1 点赞 / 13305 阅读 / 2734 字

伪类与伪元素的区别

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

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

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

伪类与伪元素的定义

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

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

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

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

image-20200521104226116

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

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叫伪类选择器


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

image-20200521104956235

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的标准出来了以后,我们发现,有些伪类不仅仅是用来描述状态,可能还要改变元素的结构,这个时候,就衍生出了“伪元素”这个选择器

总结

  1. 伪类使用:来进行,而伪元素则可以使用:::(低版本的IE必须使用双冒号)
  2. 一个选择器里,伪元素只允许出现一次,并且只能出现在末尾
  3. 一个选择器里,伪类只要不是互斥可以叠加使用
1

评论区