伪类与伪元素是怎么回事儿

￡神魔★判官ぃ 2022-08-29 00:06 199阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

![b7e7890539b2ab1a0c209aaa47fa442b.png][]

## 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 之前并没有定义伪元素，都统称为伪类，所以目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素

### 常见的伪类与伪元素 ###

**伪类：**

![0d61431d65ac3dd46be24d58c195cbf7.png][]

**伪元素：**

![1ae7240ff60a3fdfc8a0f675661aef26.png][]

## ::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>

![3fdbf89903f59f74b2002f8fe29b32fd.png][]

**attr()**

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

![831b997a9d13ca1a17701d60a18f44da.png][]

**url()/uri()**

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

![34a6098d1c1d4671aa028787ae9e3d4b.png][]

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

原文链接：https://github.com/Advanced-Frontend/Daily-Interview-Question

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「**网络**」，自动获取三分钟学前端网络篇小书（90+页）

「**JS**」，自动获取三分钟学前端 JS 篇小书（120+页）

「**算法**」，自动获取 github 2.9k+ 的前端算法小书

「**面试**」，自动获取 github 23.2k+ 的前端面试小书

「**简历**」，自动获取程序员系列的 `120` 套模版

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的

[b7e7890539b2ab1a0c209aaa47fa442b.png]: /images/20220829/980ab5d192864f9eb219be41f3011e92.png
[0d61431d65ac3dd46be24d58c195cbf7.png]: /images/20220829/b401954fbc204729909947a073f975c4.png
[1ae7240ff60a3fdfc8a0f675661aef26.png]: /images/20220829/3104a57791c4497499360a3c3da4a303.png
[3fdbf89903f59f74b2002f8fe29b32fd.png]: /images/20220829/fb071e6bbfe349e0b12e9c3a78719c3f.png
[831b997a9d13ca1a17701d60a18f44da.png]: /images/20220829/5a2187769bf44a868cebc9175136321a.png
[34a6098d1c1d4671aa028787ae9e3d4b.png]: /images/20220829/a7bc16d5d1b841b386f28d22aa1f86b7.png