第 209 题：介绍一下伪类以及伪元素

Question

CSS1 和 CSS2 中对伪类的伪元素的区别比较模糊，CSS3 对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

伪类和伪元素的区别就是是否创造了新的元素。

一、伪类

什么是伪类？伪类用于定义元素的特殊状态，例如它可以有以下作用：

• 为元素设置鼠标悬停上时的样式
• 链接已点击和未点击时的样式
• 设置元素获得焦点的样式

以下是常用的几个伪类：伪类的效果可以通过添加实际的类来实现

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

二、伪元素

在 CSS2 里的写法是 :before，在 CSS3 里的写法是 ::before，伪元素的效果可以通过添加实际的元素来实现。

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

Answer 1

CSS 选择器

想要了解伪类与伪元素，我们不得不提到 CSS 选择器，CSS 选择器是元素和其他部分组合起来，告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式

选择器的种类有：

• 类型、类和ID选择器
• 标签属性选择器
• 运算符
• 伪类与伪元素

类型、类和ID选择器

h1 { } /* 类型选择器 */
.box { } /* 类选择器 */
#unique { } /* ID选择器 */

标签属性选择器

这组选择器根据一个元素上的某个标签属性是否存在来选择：

a[title] { }

或者根据标签属性是否是特定值来选择：

a[href="https://example.com"] { }

运算符

这种选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例就是利用运算符（>）选择了<article> 元素的初代子元素

article > p { }

伪类与伪元素

最后一组就是伪类与伪元素，这一类选择器的数量众多，通常用于很明确的目的

伪类与伪元素

什么是伪类？什么是伪元素？

• 伪类：用于选择处于 特定状态 的元素，比如鼠标悬浮状态（ :hover ）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
• 伪元素：以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，产生的效果是把不存在的元素硬选出来

伪类与伪元素的区别

表现方式区别：

伪类表现的是某种状态被选择出来，例如 :hover 、 :checked ，而伪元素表现的是选择元素的某个部分，使这部分看起来像一个独立的元素，其实并不是，例如 ::before 、 ::after

抽象的说，伪类就是选择元素某状态，伪元素就是创建一个HTML元素

符号区别

伪类使用单冒号 : ，伪元素开头为双冒号 :: ，单需要注意的是 CSS3 之前并没有定义伪元素，都统称为伪类，所以目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素

常见的伪类与伪元素

伪类：

伪元素：

::before 与 ::after

接下来我们说说最常用、最经典的 ::before 和 ::after 伪元素， ::before 表示在元素内容之前插入一个虚拟的元素， ::after 则表示在元素内容之后插入，并且 ::before 和 ::after 中支持所有的 CSS 属性。

但需要注意的是这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效

content 属性

content 可取string、attr()、url()/uri()：

string

<p>三分钟学前端</p>
<style>
  p::before{
    content: "❤️";
    color: red;
  }
  p::after{
    content: "❤️";
    color: red;
  }
</style>

attr()

<a href="https://github.com/Advanced-Frontend/Daily-Interview-Question">❤️三分钟学前端❤️</a>
<style>
  a::after {
    content: ' → ' attr(href); /* 在 href 前显示一个箭头 */
  }
</style>

url()/uri()

<p>❤️三分钟学前端❤️</p>
<style>
  p::after {
    content: url("http://resource.muyiy.cn/image/20210729234502.jpeg");
  }
</style>

这两个伪元素常用于一些修饰性元素，以纯 CSS 代码添加进去，就能很好地保持 HTML 代码中的语义，既完成了显示效果，又不会让 DOM 中出现很多无语义的空元素

原文