CSS3 知识量：11 - 43 - 138
伪元素用于定位文档中包含的文本，但其无法在文档树中定位，因为伪元素表示DOM外部的某种文档结构。
在语法上，CSS3中的伪元素由两个冒号（::）开头，这种写法的主要目的是区分伪元素与伪类。
伪元素::first-letter用于选择文本块的第一个字母。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>伪元素</title>
<meta charset="UTF-8">
<style type="text/css">
div p::first-letter{
color: blue;
font-weight: 900;
}
</style>
</head>
<body>
<h2>The Three Little Pigs</h2>
<div>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
<p>Before they left, their mother told them " Whatever you do , do it the best
that you can because that's the way to get along in the world.</p>
<p>The first little pig built his house out of straw because it was the
easiest thing to do.</p>
<p>The second little pig built his house out of sticks. This was a
little bit stronger than a straw house.</p>
<p>The third little pig built his house out of bricks.</p>
</div>
</body>
</html>显示的效果为：
伪元素::first-line用于匹配元素的第一行文本，示例如下：
<!DOCTYPE html>
<html>
<head>
<title>伪元素</title>
<meta charset="UTF-8">
<style type="text/css">
div p::first-line{
color: blue;
font-weight: 900;
}
</style>
</head>
<body>
<h2>The Three Little Pigs</h2>
<div>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
<p>Before they left, their mother told them " Whatever you do , do it the best
that you can because that's the way to get along in the world.</p>
<p>The first little pig built his house out of straw because it was the
easiest thing to do.</p>
<p>The second little pig built his house out of sticks. This was a
little bit stronger than a straw house.</p>
<p>The third little pig built his house out of bricks.</p>
</div>
</body>
</html>显示的效果为：
伪元素::before和::after常用于插入额外的内容，但其生成的内容并不是DOM的一部分。这样可以避免对添加的额外内容进行硬编码，更具灵活性。例如，在外部链接后面的括号中添加URL内容，结合content属性，示例如下：
<!DOCTYPE html>
<html>
<head>
<title>伪元素</title>
<meta charset="UTF-8">
<style type="text/css">
a[href^=http]::after{
content: "("attr(href)")";
}
</style>
</head>
<body>
<h2>::after的示例</h2>
<div>
<p>Click <a href="http://www.pnotes.cn">here</a> to pnotes.cn</p>
</div>
</body>
</html>显示效果为：
伪元素::selection用于匹配突出显示的文本。默认情况下，选择后的文本是深蓝色背景，白色字体。通过::selection可以设置不同的样式。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>伪元素</title>
<meta charset="UTF-8">
<style type="text/css">
p::selection{
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<h2>The Three Little Pigs</h2>
<div>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
<p>Before they left, their mother told them " Whatever you do , do it the best
that you can because that's the way to get along in the world.</p>
<p>The first little pig built his house out of straw because it was the
easiest thing to do.</p>
<p>The second little pig built his house out of sticks. This was a
little bit stronger than a straw house.</p>
<p>The third little pig built his house out of bricks.</p>
</div>
</body>
</html>显示的效果为：
注意：目前::selection仅支持两个属性：background-color和color。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6