015_CSS伪元素选择器

最新推荐文章于 2021-10-09 18:33:06 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-10-09 18:33:06 发布

阅读量338

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109063715

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

本文介绍了CSS伪元素，如::first-line、::first-letter、::before和::after，它们如何创建元素的虚拟样式，以及应用场景和关键属性。通过实例演示了如何运用这些伪元素实现独特文本效果和内容插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 伪元素选择器是通过双冒号(::)加上特定的具有某种含义的单词来确定所选元素。

2. 伪元素/伪对象: 不存在在DOM文档中, 是虚拟的元素, 是创建的新元素。这个新元素(伪元素)是某个元素的子元素, 这个子元素虽然在逻辑上存在, 但却并不实际存在于文档树中。

3. 为了向后兼容, CSS2和CSS1伪元素可接受单冒号语法。在CSS3中, 双冒号取代了伪元素的单冒号表示法。这是W3C试图区分伪类和伪元素的尝试。

4. ::first-line伪元素

4.1. "first-line"伪元素用于向文本的首行设置特殊样式。

4.2. "first-line"伪元素只能用于块级元素。

4.3. 在下面的例子中, 浏览器会根据"first-line"伪元素中的样式对p元素的第一行文本进行修饰:

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

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

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

4.5. 例子

4.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>first-line伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p::first-line {
				color: #ff0000;
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		<p>you can use the ::first-line pseudo-element to add <br />a special effect to the first line of a text!</p>
	</body>
</html>

4.5.2. 效果图

5. ::first-letter伪元素

5.1. "first-letter"伪元素用于向文本的首字母设置特殊样式:

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

5.2. "first-letter"伪元素只能用于块级元素。

5.3. 下面的属性适用于::first-letter伪元素:

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align(仅当"float"为"none")
text-transform
line-height
float
clear

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>first-letter伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			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 letter of a text!</p>
	</body>
</html>

5.4.2. 效果图

6. ::before伪元素

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

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

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

6.3. 例子

6.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>before伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1::before {
				content: url("w3school.png"); 
			}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>The ::before pseudo-element inserts content before an element.</p>
		<h1>This is a heading</h1>
		<p><b>注释: </b>如果已规定!DOCTYPE, 那么Internet Explorer 8(以及更高版本)支持::before。
	</body>
</html>

6.3.2. 效果图

7. ::after伪元素

7.1. "::after"伪元素可以在元素的内容之后插入新内容。

7.2. 下面的例子在每个<h1>元素后面插入一幅图片:

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

7.3. 例子

7.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>after伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1::after {
				content: url("w3school.png");
			}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>The ::after pseudo-element inserts content after an element.</p>
		<h1>This is a heading</h1>
		<p><b>注释: </b>如果已规定!DOCTYPE, 那么Internet Explorer 8(以及更高版本)支持::after。
	</body>
</html>

7.3.2. 效果图

8. ::selection选择器

8.1. ::selection选择器匹配被用户选取的部分。

8.2. 只能向::selection选择器应用少量CSS属性: color、background、cursor以及outline。

8.3. 例子

8.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>selection伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			::selection {
				color:#ff0000;
			}
		</style>
	</head>
	<body>
		<h1>请试着选取页面上的文本</h1>
		<p>这是一个段落。</p>
		<div>这是 div 元素中的文本。</div>
	</body>
</html>

8.3.2. 效果图

9. 伪元素