伪元素选择器

最新推荐文章于 2024-04-16 12:23:43 发布

qq_34786755

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量117

点赞数

分类专栏：伪元素选择器文章标签： html

本文链接：https://blog.csdn.net/qq_34786755/article/details/113527452

版权

伪元素选择器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

伪元素选择器

- - 关键字
  - 例子

关键字

::selection 选择指定元素中被用户选中的内容
::before 可以在内容之前插入新内容
::after 可以在内容之后插入新内容
::first-line 选择指定选择器的首行
::fister-letter 选择文本的第一个字符

必须双冒号！！！

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<link rel="stylesheet" type="text/css" href="./weiyuansu.css"/>
	</head>
	<body>
		<p>测试地址0</p>
		<p>测试地址1</p>
		<p>测试地址2</p>
		<h1>测试地址3 </h1>
		<p>测试地址4</p>
		<p>测试地址5></p>
		<p>测试地址6</p>
		<p>测试地址7</p>
		<p>测试地址8</p>
		<table bgcolor="#0000FF" border="1" width="500">
			<tr>
				<th>222</th>
				<th>222</th>
				<th>222</th>
				<th>222</th>
			</tr>
			<tr>
				<th>222</th>
				<th>222</th>
				<th>222</th>
				<th>222</th>
			</tr>
			<tr>
				<th>222</th>
				<th>222</th>
				<th>222</th>
				<th>222</th>
			</tr>
			<tr>
				<th>222</th>
				<th>222</th>
				<th>222</th>
				<th>222</th>
			</tr>
		</table>
	</body>
</html>

p::before{
	/* 标签前面加上 content */
	content: "我一直在等你";
	background-color: red;
}
p::after{
	/* 标签后面加上 content */
	content: "你是真的狗啊";
	background-color: #008000;
}
h1::first-line{
	/* 给标签改变样式 目前改变了背景 */
	background-color: red;
}
p::selection{
	/* 鼠标选中的颜色值 */
	background-color: #FFFF00;
}

在这里插入图片描述