CSS 伪元素用于设置元素的指定部分的样式。
例如,它可用于:
设置元素的第一个字母或行的样式
在元素内容之前或之后插入内容
伪元素的语法:
selector::pseudo-element {
property: value;
}
::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 类组合:
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>
::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>
::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>
::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>
::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>
示例
p::after
示例描述
在每个 <p> 元素的内容后面插入一些内容
示例
p::before
示例描述
在每个 <p> 元素的内容之前插入一些内容
示例
p::first-letter
示例描述
选择每个 <p> 元素的第一个字母
示例
p::first-line
示例描述
选择每个 <p> 元素的第一行
示例
::marker
示例描述
选择列表项的标记
示例
p::selection
示例描述
选择用户选择的元素部分
示例
a:active
示例描述
选择活动链接
示例
input:checked
示例描述
选择每个选中的 <input> 元素
示例
input:disabled
示例描述
选择每个禁用的 <input> 元素
示例
p:empty
示例描述
选择没有子元素的每个 <p> 元素
示例
input:enabled
示例描述
选择每个启用的 <input> 元素
示例
p:first-child
示例描述
选择作为其父级的第一个子级的每个 <p> 元素
示例
p:first-of-type
示例描述
选择作为其父元素的第一个 <p> 元素的每个 <p> 元素
示例
input:focus
示例描述
选择具有焦点的 <input> 元素
示例
a:hover
示例描述
鼠标悬停时选择链接
示例
input:in-range
示例描述
选择值在指定范围内的 <input> 元素
示例
input:invalid
示例描述
选择所有具有无效值的 <input> 元素
示例
p:lang(it)
示例描述
选择每个 lang 属性值以“it”开头的 <p> 元素
示例
p:last-child
示例描述
选择作为其父级的最后一个子级的每个 <p> 元素
示例
p:last-of-type
示例描述
选择作为其父元素的最后一个 <p> 元素的每个 <p> 元素
示例
a:link
示例描述
选择所有未访问的链接
示例
:not(p)
示例描述
选择不是 <p> 元素的每个元素
示例
p:nth-child(2)
示例描述
选择作为其父元素的第二个子元素的每个 <p> 元素
示例
p:nth-last-child(2)
示例描述
选择作为其父级的第二个子级的每个 <p> 元素,从最后一个子级开始计数
示例
p:nth-last-of-type(2)
示例描述
选择作为其父元素的第二个 <p> 元素的每个 <p> 元素(从最后一个子元素开始计数)
示例
p:nth-of-type(2)
示例描述
选择作为其父元素的第二个 <p> 元素的每个 <p> 元素
示例
p:only-of-type
示例描述
选择作为其父元素的唯一 <p> 元素的每个 <p> 元素
示例
p:only-child
示例描述
选择作为其父级的唯一子级的每个 <p> 元素
示例
input:optional
示例描述
选择没有“required”属性的 <input> 元素
示例
input:out-of-range
示例描述
选择值超出指定范围的 <input> 元素
示例
input:read-only
示例描述
选择指定了“readonly”属性的 <input> 元素
示例
input:read-write
示例描述
选择没有“readonly”属性的 <input> 元素
示例
input:required
示例描述
选择指定了“required”属性的 <input> 元素
示例
root
示例描述
选择文档的根元素
示例
#news:target
示例描述
选择当前活动的 #news 元素(单击包含该锚点名称的 URL)
示例
input:valid
示例描述
选择所有具有有效值的 <input> 元素
示例
a:visited
示例描述
选择所有访问过的链接