CSS::伪元素是怎么回事儿？

xn213
464 阅读5分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力

我们在实际工作中经常用的两个伪元素, 或许大家都知道, 因为用的比较多, 那就是 ::before 和 ::after,

其实最开始较早的还是 ::first-letter 这个伪元素, 大家能够在比较早的文档/新闻等页面中见得到(现代网页中逐渐被淘汰了: 可能并不是太好看吧..), 那就是文章第一个文字特别大(有脑补画面了吧)占据两行甚至更大.

下面来具体学习下 CSS 中的伪元素..

0. 从最开始的 清除浮动的方法 说起:

清除浮动(虽然现在慢慢用少了有没有), 最常用也是最为推荐的方案之一: 就是使用 ::aftter 这个代表一个元素之后最近的元素,

给浮动元素的容器添加一个类名 .clearfix, 然后给这个 class 添加一个 ::after 伪元素实现元素末尾添加一个看不见的块元素（Block element）并设置如下样式 来清除浮动。

(关键样式: clear:both)

.clearfix::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}

1. 什么是伪元素?

1.1 定义

pseudo-element 名为 伪元素, 顾名思义它不是真正的元素, 是一个假元素, 通过 CSS 设置来使用, 并可被客户端用户看到: 通过设置属性 content: '要显示的内容', 来显示其内容

CSS 中伪元素用于设置元素指定部分的样式。(前后 / 开头 / 选中). 默认为内联元素, 如果想设置宽高, 则须要设置其为块元素: display: block

1.2 作用:

伪元素 可用于：

  1. 设置元素的首字母、首行的样式
  2. 设置在元素的内容之前或之后插入的内容
  3. 设置选中元素的样式: 比方常用的选中文本的背景颜色

2. 伪元素 的 使用语法：

/* 选择器::伪元素 { 样式属性 } */
selector::pseudo-element {
  property: value;
}

3. CSS 中的伪元素 分类:

最常用的 莫过于 ::before 和 ::after 了吧,

所有 5 个 CSS 伪元素列表:

#伪元素示例效果例子描述
1::before h1::before 在每个 <h1> 元素之前插入内容
2::after h1::after 在每个 <h1> 元素之后插入内容
3::first-letterarticle::first-letter选择每个 <article> 元素的首字母
4::first-line article::first-line选择每个 <article> 元素的首行
5::selectiondiv::selection选择用户选择的元素部分(通常为文本)

从字面上理解, 上述中的插入内容到 元素之前 和 元素之后, 但这个 之前和之后 有点小问题,

并不是我们的直觉理解的: 注入的内容将会被插入到目标元素的子元素的前或后，但它会被插入到目标元素下的所有内容的“前”或“后”。

3.1 CSS ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

如下面的例子在每个 <h1> 元素的内容之前插入一背景图像：

示例中图片为 掘金logo juejiin-logo-small

简单的设置一个图片:

h1::before {
  content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}

通过背景设置, 则需要设置的属性比较多了:

还可以设置图片的位置: position, 这里没有列举:

h1::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  background-size: 100% 100%;
  opacity: 0.36;
  background-repeat: no-repeat;
  background: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}

3.2 CSS ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

如下面的例子在每个 <h1> 元素的内容之后插入一幅图像：

示例: 同理 ::before

h1::after {
  content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}

3.3 ::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 <p> 元素中文本的首字母格式：

示例:

p::first-letter {
  color: #b45dea;
  font-size: xx-large;
}

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 "float" 为 "none"）
  • text-transform
  • line-height
  • float
  • clear

伪元素和 CSS 类名

伪元素可以与 CSS class 类名 结合使用：

示例:

p.intro::first-letter {
  color: #b45dea;
  font-size: 200%;
}

上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。

多个伪元素 也可以组合几个伪元素。

在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：

::first-letter 示例:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

3.4 ::first-line 伪元素

::first-line 伪元素用于向文本的 首行 添加特殊样式。

下面的示例例为所有段落 <p> 元素中的首行添加样式：

示例:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

适用于 ::first-line 伪元素的属性：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

伪元素的书写方式:

请注意 双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

3.5 CSS - ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

  • color
  • background
  • cursor
  • outline

下面示例使用户所选择的文本在黄色背景上显示为指定颜色：

::selection 示例:

::selection {
  color: #fff;
  background: #b45dea;
}
avatar
文章
阅读
粉丝