【CSS】伪类选择器和伪元素选择器

最新推荐文章于 2024-04-17 10:43:16 发布

z♡j

最新推荐文章于 2024-04-17 10:43:16 发布

阅读量823

点赞数 3

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_45890345/article/details/121758023

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

伪类分为状态性和结构性选择器

p:first-child{
	background-color: red;
}
p:last-child{
	background-color: blue;
}

伪元素选择器：

p::before{
	content: "终于找到你";   <!--在段落前添加内容-->
}
p::after{
	content: "不舍离开你";
}
p::first-line{
	background-color: yellow;
}
p::selection{
	background-color: red;  <!--实时选中添加背景色，若打*则是页面任何一个内容都可以-->
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="03.css">
</head>
<body>
	<p>诫子书
(蜀)诸葛亮
夫君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。夫学须静也，才须学也，非学无以广才，非志无以成学。淫慢则不能励精，险躁则不能治性。年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及！</p>
<p>诫子书
(蜀)诸葛亮
夫君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。夫学须静也，才须学也，非学无以广才，非志无以成学。淫慢则不能励精，险躁则不能治性。年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及！</p>
</body>
</html>

z♡j

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【CSS】伪类选择器和伪元素选择器

伪类分为状态性和结构性选择器p:first-child{ background-color: red;}p:last-child{ background-color: blue;}伪元素选择器：p::before{ content: "终于找到你"; }p::after{ content: "不舍离开你";}p::first-line{ background-color: yellow...
复制链接

扫一扫