CSS Pseudo Element 伪元素

前言

  • CSS 伪元素是用来添加一些选择器的特殊效果。
选择器 示例 描述 CSS 备注 🔗
:link a:link 选择所有未访问链接 1 🔗
:visited a:visited 选择所有访问过的链接 1 🔗
:hover a:hover 把鼠标放在链接上的状态 1 🔗
:active a:active 选择正在活动链接 1 🔗
:focus input:focus 选择元素输入后具有焦点 2 🔗
:first-letter p:first-letter 选择每个 <p> 元素的第一个字母 1 🔗
:first-line p:first-line 选择每个 <p> 元素的第一行 1 🔗
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素 2 🔗
:before p:before 在每个 <p> 元素之前插入内容 2 🔗
:after p:after 在每个 <p> 元素之后插入内容 2 🔗
:lang(language) p:lang(it) <p> 元素的 lang 属性选择一个开始值 2 🔗
  • 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

  • 与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

1、语法

  • 伪元素的语法:

    1
    2
    3
    selector:pseudo-element {
    property: value;
    }

1.1 伪元素和 CSS 类

  • 伪元素可以与 CSS 类配合使用。

  • 语法:

    1
    2
    3
    selector.class:pseudo-element {
    property: value;
    }
  • 实例

    1
    2
    3
    4
    5
    <style>
    p.article:first-letter {
    color: #ff0000;
    }
    </style>
    1
    <p class="article">文章段落</p>
  • 效果

1.2 多个伪元素

  • 可以结合多个伪元素来使用。

  • 在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。

  • 段落中的其余文本将以默认字体大小和颜色来显示。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    p:first-letter {
    color: #ff0000;
    font-size: xx-large;
    }
    p:first-line {
    color: #0000ff;
    font-variant: small-caps;
    }
    </style>
    1
    <p>结合使用 "first-line" 和 "first-letter" 伪元素向文本的首行和首字母设置特殊样式。</p>
  • 效果

2、:first-letter 伪元素

  • :first-letter 伪元素用于向文本的首字母设置特殊样式。
选择器 示例 描述 CSS 备注 🔗
:first-letter p:first-letter 选择每个 <p> 元素的第一个字母 1 🔗
  • 注意::first-letter 伪元素只能用于块级元素。

  • 下面的属性可应用于 :first-letter 伪元素:

    • font properties
    • color properties
    • background properties
    • margin properties
    • padding properties
    • border properties
    • text-decoration
    • vertical-align (only if “float” is “none”)
    • text-transform
    • line-height
    • float
    • clear
  • 实例

    1
    2
    3
    4
    5
    6
    <style>
    p:first-letter {
    color: #ff0000;
    font-size: xx-large;
    }
    </style>
    1
    <p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式</p>
  • 效果

    可以使用 “first-letter” 伪元素向文本的首字母设置特殊样式

3、:first-line 伪元素

  • :first-line 伪元素用于向文本的首行设置特殊样式。
选择器 示例 描述 CSS 备注 🔗
:first-line p:first-line 选择每个 <p> 元素的第一行 1 🔗
  • 注意::first-line 伪元素只能用于块级元素。

  • 下面的属性可应用于 :first-line伪元素:

    • font properties
    • color properties
    • background properties
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear
  • 在下面的例子中,浏览器会根据 :first-line 伪元素中的样式对 p 元素的第一行文本进行格式化。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
    p:first-line {
    color: #ff0000;
    font-variant: small-caps;
    }
    </style>
    1
    <p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
  • 效果

    你可以使用 “first-line” 伪元素向文本的首行设置特殊样式。你可以
    使用 “first-line” 伪元素向文本的首行设置特殊样式。

4、:before 伪元素

  • :before 伪元素可以在元素的内容前面插入新内容。
选择器 示例 描述 CSS 备注 🔗
:before p:before 在每个 <p> 元素之前插入内容 2 🔗
  • 下面的例子在每个 <h1> 元素前面插入一幅图片。

  • 实例

    1
    2
    3
    4
    5
    <style>
    h1:before {
    content: url(https://demo.qianchia.com/media/image/demo/demo9.png);
    }
    </style>
    1
    2
    3
    <h1>This is a heading</h1>
    <p>The :before pseudo-element inserts content before an element.</p>
    <h1>This is a heading</h1>
  • 效果

    This is a heading


    The :before pseudo-element inserts content before an element.


    This is a heading

5、:after 伪元素

  • :after 伪元素可以在元素的内容之后插入新内容。
选择器 示例 描述 CSS 备注 🔗
:after p:after 在每个 <p> 元素之后插入内容 2 🔗
  • 下面的例子在每个 <h1> 元素后面插入一幅图片。

  • 实例

    1
    2
    3
    4
    5
    <style>
    h1:after {
    content: url(https://demo.qianchia.com/media/image/demo/demo9.png);
    }
    </style>
    1
    2
    3
    <h1>This is a heading</h1>
    <p>The :after pseudo-element inserts content after an element.</p>
    <h1>This is a heading</h1>
  • 效果

    This is a heading


    The :after pseudo-element inserts content after an element.


    This is a heading

6、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、语法
    1. 2.1. 1.1 伪元素和 CSS 类
    2. 2.2. 1.2 多个伪元素
  3. 3. 2、:first-letter 伪元素
  4. 4. 3、:first-line 伪元素
  5. 5. 4、:before 伪元素
  6. 6. 5、:after 伪元素
  7. 7. 6、CSS 实例
隐藏目录