CSS 伪元素


目录

    显示目录


什么是伪元素?

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

例如,它可用于:

  • 设置元素的第一个字母或行的样式

  • 在元素内容之前或之后插入内容


句法

伪元素的语法:

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

::first-line 伪元素

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

以下示例格式化所有 <p> 中文本的第一行 要素:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>


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

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

  • 字体属性

  • 颜色属性

  • 背景属性

  • 字间距

  • 字母间距

  • 文字修饰

  • 垂直对齐

  • 文本转换

  • 行高

  • 清除

注意双冒号符号 - ::first-line:first-line

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

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

对于 向后兼容,单冒号语法对于 CSS2 和 CSS1 是可接受的 伪元素。



::首字母伪元素

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

以下示例格式化所有 <p> 中文本的第一个字母 要素:

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>


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

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

  • 字体属性

  • 颜色属性

  • 背景属性

  • 保证金属性

  • 填充属性

  • 边框属性

  • 文字修饰

  • 垂直对齐(仅当“float”为“none”时)

  • 文本转换

  • 行高

  • 漂浮

  • 清除


伪元素和 HTML 类

伪元素可以与 HTML 类组合:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>

</body>
</html>


上面的示例将显示 class="intro" 的段落的第一个字母,在 红色且尺寸较大。


多个伪元素

也可以组合多个伪元素。

在下面的示例中,段落的第一个字母将为红色,在 xx-large 字体大小。第一行的其余部分将是蓝色的,并且在 小帽子。该段落的其余部分将是默认的字体大小和颜色:

例子

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

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>



CSS - ::before 伪元素

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

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>



CSS - ::after 伪元素

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

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>



CSS - ::marker 伪元素

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

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>



CSS - ::selection 伪元素

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

以下 CSS 属性可应用于 ::selection颜色背景光标轮廓

以下示例使所选文本在黄色背景上变为红色:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

</body>
</html>




所有 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)

示例描述

选择每个 lang 属性值以“it”开头的 <p> 元素

: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> 元素的每个 <p> 元素

:only-child

示例

p:only-child

示例描述

选择作为其父级的唯一子级的每个 <p> 元素

:optional

示例

input:optional

示例描述

选择没有“required”属性的 <input> 元素

:out-of-range

示例

input:out-of-range

示例描述

选择值超出指定范围的 <input> 元素

:read-only

示例

input:read-only

示例描述

选择指定了“readonly”属性的 <input> 元素

:read-write

示例

input:read-write

示例描述

选择没有“readonly”属性的 <input> 元素

:required

示例

input:required

示例描述

选择指定了“required”属性的 <input> 元素

:root

示例

root

示例描述

选择文档的根元素

:target

示例

#news:target

示例描述

选择当前活动的 #news 元素(单击包含该锚点名称的 URL)

:valid

示例

input:valid

示例描述

选择所有具有有效值的 <input> 元素

:visited

示例

a:visited

示例描述

选择所有访问过的链接