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、语法

• 伪元素的语法：

  selector:pseudo-element {
      property: value;
  }

1.1 伪元素和 CSS 类

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

• 语法：

  selector.class:pseudo-element {
      property: value;
  }

• 实例

  <style>
      p.article:first-letter {
          color: #ff0000;
      }
  </style>

  <p class="article">文章段落</p>

• 效果

  

1.2 多个伪元素

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

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

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

• 实例

  <style>
      p:first-letter {
          color: #ff0000;
          font-size: xx-large;
      }
      p:first-line {
          color: #0000ff;
          font-variant: small-caps;
      }
  </style>

  <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

• 实例

  <style>
      p:first-letter {
          color: #ff0000;
          font-size: xx-large;
      }
  </style>

  <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 元素的第一行文本进行格式化。

• 实例

  <style>
      p:first-line {
          color: #ff0000;
          font-variant: small-caps;
      }
  </style>

  <p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>

• 效果

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

4、:before 伪元素

• :before 伪元素可以在元素的内容前面插入新内容。

选择器	示例	描述	CSS	备注	🔗
:before	p:before	在每个 <p> 元素之前插入内容	2		🔗

• 下面的例子在每个 <h1> 元素前面插入一幅图片。

• 实例

  <style>
      h1:before {
          content: url(https://demo.qianchia.com/media/image/demo/demo9.png);
      }
  </style>

  <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> 元素后面插入一幅图片。

• 实例

  <style>
      h1:after {
          content: url(https://demo.qianchia.com/media/image/demo/demo9.png);
      }
  </style>

  <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 实例

• 把文本的第一个字母设为特殊的字母


• 把第一行文字设置为特殊


• 把第一行文字的第一个字母设置为特殊


• 使用：在一个元素之前插入一些内容


• 使用：在一个元素之后插入一些内容