CSS伪元素选择器

最新推荐文章于 2024-07-03 19:48:41 发布

高鹏飞白羊

最新推荐文章于 2024-07-03 19:48:41 发布

阅读量96

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102387139

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

attr:first-line{}
第一行字体样式
attr:first-letter{}
第一个字体样式
attr::selection{}
选中字体样式，只支持背景颜色和字体颜色

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			h3:first-line{color:#f00;}
			h3:first-letter{color:#f0f;}
			h3::selection{
				color:yellow;
				background:#000;
			}
	</style>
	</head>
	<body>
		<h3>To install NumPy, we strongly recommend using a scientific Python distribution. See Installing the SciPy Stack for details.

Many high quality online tutorials, courses, and books are available to get started with NumPy. For a quick introduction to NumPy we provide the NumPy Tutorial. We also recommend the SciPy Lecture Notes for a broader introduction to the scientific Python ecosystem.

For more information on the SciPy Stack (for which NumPy provides the fundamental array data structure), see scipy.org.	</h3>
	</body>
</html>

内容生成
使用css动态向某元素中插入一段"“内容”"

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			div::before{
				content:"numpy:";
				display:block;
				width:100px;
				height:50px;
				font-weight:bold;
			}
			div::after{
				content:"numpy explan!";
				display:block;
			}
	</style>
	</head>
	<body>
		<div id="d1">
		To install NumPy, we strongly recommend using a scientific Python distribution. See Installing the SciPy Stack for details.

Many high quality online tutorials, courses, and books are available to get started with NumPy. For a quick introduction to NumPy we provide the NumPy Tutorial. We also recommend the SciPy Lecture Notes for a broader introduction to the scientific Python ecosystem.

For more information on the SciPy Stack (for which NumPy provides the fundamental array data structure), see scipy.org.	
		</div>
	</body>
	
</html>

用来处理高度坍塌

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			#d1::before{
				content:"numpy:";
				display:block;
				width:100px;
				height:50px;
				font-weight:bold;
			}
			#d1::after{
				content:"numpy explan!";
				display:block;
			}
			#p1,#p2,#p3{
				width:100px;
				height:100px;
				margin:0 5px;
				background:#f00;
				float:left;
			}
			#parent{
				width:360px;
				border:2px solid #aaa;
			}
			#parent::after{
				content:"";
				display:block;
				clear:both;
			}
	</style>
	</head>
	<body>
		<div id="parent">
			<p id="p1"></p>
			<p id="p2"></p>
			<p id="p3"></p>
		</div>
		<div id="d1">
		To install NumPy, we strongly recommend using a scientific Python distribution. See Installing the SciPy Stack for details.

Many high quality online tutorials, courses, and books are available to get started with NumPy. For a quick introduction to NumPy we provide the NumPy Tutorial. We also recommend the SciPy Lecture Notes for a broader introduction to the scientific Python ecosystem.

For more information on the SciPy Stack (for which NumPy provides the fundamental array data structure), see scipy.org.	
		</div>
	</body>
	
</html>

处理外边距溢出

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			#d1::before{
				content:"numpy:";
				display:block;
				width:100px;
				height:50px;
				font-weight:bold;
			}
			#d1::after{
				content:"numpy explan!";
				display:block;
			}
			#p1,#p2,#p3{
				width:100px;
				height:100px;
				margin:0 5px;
				background:#f00;
				float:left;
			}
			#parent{
				width:360px;
				border:2px solid #aaa;
			}
			#parent::after{
				content:"";
				display:block;
				clear:both;
			}
			#d3{
				width:200px;
				height:200px;
				border:1px solid #0f0;
				background:#f00;
			}
			#d4{
				width:100px;
				height:100px;
				background:#00f;
				margin-top:20px;
			}
			#d3::after{
				content:"";
				display:table;
			}
	</style>
	</head>
	<body>
		<div id="d3">
			<div id="d4"></div>
		</div>
		<div id="parent">
			<p id="p1"></p>
			<p id="p2"></p>
			<p id="p3"></p>
		</div>
		<div id="d1">
		To install NumPy, we strongly recommend using a scientific Python distribution. See Installing the SciPy Stack for details.

Many high quality online tutorials, courses, and books are available to get started with NumPy. For a quick introduction to NumPy we provide the NumPy Tutorial. We also recommend the SciPy Lecture Notes for a broader introduction to the scientific Python ecosystem.

For more information on the SciPy Stack (for which NumPy provides the fundamental array data structure), see scipy.org.	
		</div>
	</body>
	
</html>

高鹏飞白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS伪元素选择器

attr:first-line{}第一行字体样式attr:first-letter{}第一个字体样式attr::selection{}选中字体样式，只支持背景颜色和字体颜色<!doctype html><html> <head> <title></title> <meta charset="utf-8">...
复制链接

扫一扫