详解 CSS 属性 - 伪类和伪元素的区别

你的名字 2021-06-26 16:06 527阅读 0赞

之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @riophae 兄指正了我的错误，所以今天打算好好研究下两者的区别。
首先，阅读 w3c 对两者的定义：

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

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

请输入图片描述

伪元素种类

请输入图片描述

区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

  1. p>i:first-child { color: red}
  3. <p>
  4.     <i>first</i>
  5.     <i>second</i>
  6. </p>

请输入图片描述

  1. //伪类 :first-child 添加样式到第一个子元素

如果我们不使用伪类，而希望达到上述效果，可以这样做：

  1. .first-child { color: red}
  3. <p>
  4.     <i class="first-child">first</i>
  5.     <i>second</i>
  6. </p>

即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：

  1. p:first-letter { color: red}
  3. <p>I am stephen lee.</p>

请输入图片描述

  1. //伪元素 :first-letter 添加样式到第一个字母

那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

  1. .first-letter { color: red}
  3. <p><span class='first-letter'>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

总结

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

  1. :Pseudo-classes
  2. ::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

发表评论

表情：
评论列表 （有 0 条评论，527人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS的伪类和伪元素

    定义 伪类: CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

    电玩女神电玩女神/ 0 赞/ 241 阅读

    相关 css 伪类、伪元素

    一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

    青旅半醒青旅半醒/ 0 赞/ 259 阅读

    相关 CSS伪类和伪元素

    为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

    ゝ一世哀愁。ゝ一世哀愁。/ 0 赞/ 322 阅读