二维码
搜索 ×

CSS 伪元素

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 伪元素

什么是伪元素？

CSS 伪元素用于设置元素的指定部分的样式。

例如，它可用于：

  • 设置元素的第一个字母或行的样式
  • 在元素内容之前或之后插入内容

语法

伪元素的语法：

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

：：first-line 伪元素

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

以下示例设置文本第一行的格式（全<p> 元素：

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

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

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

  • 字体属性
  • 颜色属性
  • 背景属性
  • 字间距
  • 字母间距
  • 文字修饰
  • 垂直对齐
  • 文本转换
  • 行高
  • 清楚

请注意双冒号表示法 - 与

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

使用了单冒号语法 用于 CSS2 和 CSS1 中的伪类和伪元素。

为 向后兼容，CSS2 和 CSS1 可以接受单冒号语法 伪元素。::first-line``:first-line

：：first-letter 伪元素

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

以下示例设置所有 <p 中文本的第一个字母的格式> 元素：

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

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

以下属性适用于 ：：first-letter 伪 - 元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 边距属性
  • 填充属性
  • 边框属性
  • 文字修饰
  • 垂直对齐（仅当“float”为“none”时）
  • 文本转换
  • 行高
  • 浮
  • 清楚

伪元素和 HTML 类

伪元素可以与 HTML 类结合使用：

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

上面的示例将显示带有 class=“intro” 的段落的第一个字母，在 红色和更大的尺寸。

多个伪元素

也可以组合几个伪元素。

在以下示例中，段落的第一个字母将是红色的，在 XX-large 字体大小。第一行的其余部分将是蓝色的，并且在 小盘股。段落的其余部分将是默认字体大小和颜色：

1
2
3
4
5
p::first-letter {  color: #ff0000;  
  font-size: xx-large;}  

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

CSS - ：：before 伪元素

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

以下示例在每个 <h1> 元素的内容之前插入一个图像：

1
h1::before {  content: url(smiley.gif);}

CSS - ：：after 伪元素

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

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

1
h1::after {  content: url(smiley.gif);}

CSS - ：：marker 伪元素

伪元素选择 列表项的标记。::marker

以下示例设置列表项标记的样式：

1
2
::marker {  color: red;  
  font-size: 23px;}

CSS - ：：selection 伪元素

伪元素与元素的部分匹配，该元素是 由用户选择。::selection

以下 CSS 属性可应用于 ：、 、 和 。::selection``color``background``cursor``outline

以下示例将所选文本设为黄色背景上的红色：

1
2
::selection {  color: red;  
  background: yellow;}

所有 CSS 伪元素

选择器 示例 说明
::after p::after 在每个元素后插入内容<p>
::before p::before 在每个元素之前插入内容<p>
::first-letter p::first-letter 选择每个元素的首字母<p>
::first-line p::first-line 选择每个 <p>'元素的第一行
::marker ::marker 选择列表项的标记
::selection p::selection

所有 CSS 伪类

选择器 示例 说明
:active a:active 选择活动链接
:checked input:checked 选择每个选中的 <input>
:disabled input:disabled 选择每个禁用的<input>
:empty p:empty 选择每个<p>没有子元素的 ‘’ 元素
:enabled input:enabled 选择每个启用的<input>元素
:first-child p:first-child 选择<p>作为其父元素的第一个子元素的每个  元素
:first-of-type p:first-of-type 选择<p>作为其父元素的第一个 元素的每个 <p>元素
:focus input:focus 选择具有焦点的 <input> 元素
:hover a:hover 鼠标悬停时选择链接
:in-range input:in-range 选择<input>值在指定范围内的元素
:invalid input:invalid 选择所有<input>具有无效值的 ‘’ 元素
:lang(language) p:lang(it) 选择每个 <p>元素，其 lang 属性值以 “it” 开头
:last-child p:last-child 选择<p>作为其父元素的最后一个子元素的每个 元素
:last-of-type p:last-of-type 选择<p>作为其父元素的最后一个 ‘’ 元素的每个 ‘’ <p>元素
:link a:link 选择所有未访问的链接
:not(selector) :not(p) 选择不是 元素的每个<p>元素
:nth-child(n) p:nth-child(2) 选择<p>作为其父元素的第二个子元素的每个元素
:nth-last-child(n) p:nth-last-child(2) 选择作为其父元素的第二个子元素的每个 <p> 元素，从最后一个子元素开始计数
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为其父元素的第二个 ‘’ 元素的每个 <p><p>元素，从最后一个子元素开始计数
:nth-of-type(n) p:nth-of-type(2) 选择<p>作为<p>其父元素的第二个元素的每个 元素
:only-of-type p:only-of-type 选择作为其父元素的唯一元素的每个 <p> 元素
:only-child p:only-child 选择作为<p>其父元素的唯一子元素的每个元素
:optional input:optional 选择<input>没有“必需”属性的元素
:out-of-range input:out-of-range 选择<input>值超出指定范围的元素
:read-only input:read-only 选择<input>指定了“readonly”属性的元素
:read-write input:read-write 选择<input>没有“readonly”属性的元素
:required input:required 选择<input>指定了“required”属性的元素
:root root 选择文档的根元素
:target #news:target 选择当前活动的 #news 元素（单击包含该锚点名称的 URL）
:valid input:valid 选择所有<input>具有有效值的元素
:visited a:visited 选择所有访问过的链接

推荐教程