了解before和after的作用，就会懂了.clearfixafter清除浮动的作用

最新推荐文章于 2022-09-20 06:49:15 发布

Bejpse

最新推荐文章于 2022-09-20 06:49:15 发布

阅读量184

点赞数

分类专栏：前端 html 文章标签： java list json

本文链接：https://blog.csdn.net/Bejpse/article/details/123220505

版权

前端同时被 2 个专栏收录

90 篇文章 12 订阅

订阅专栏

html

90 篇文章 0 订阅

订阅专栏

本文介绍了三种CSS样式的设置方法。第一种是通过nth-of-type选择器为不同<span>元素设置不同边框颜色。第二种利用伪元素:before和:after在元素前后添加内容并设置样式。第三种展示了.clearfix:after方法用于清除浮动，保持布局整洁。

摘要由CSDN通过智能技术生成

第一种样式设置

当在一个元素里添加span，想要设置css样式，需要重新命名再设置css样式，才会达到效果，比较麻烦

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<style>
 			span:nth-of-type(1){
				border: 1px solid red;
			}
 			span:nth-of-type(2){
 				border: 1px solid salmon;
 			}
 		</style>
 	</head>
 	<body>
 		<p>
			<span>爱:</span>
 			我爱css
			<span>不爱</span>
 		</p>
 	</body>
 </html>

在这里插入图片描述

第二种样式设置

我们可以发现,我们可以直接在css里面用.pp：before（前）创建一个行内元素
.pp：after（后）创建一个行内元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pp:before{
				content: "我:";
				border: 1px red solid;
			}
			.pp::after{				content: "不爱";
				border: 1px red solid;
			}
		</style>
	</head>
	<body>
		<p class="pp">
			我爱css
		</p>
	</body>
</html>

在这里插入图片描述

.clearfix:after清除浮

想必你也看到也懂了。

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<style>
 		div{
 			background-color: gold;
 		}
 		div p{ background-color: hotpink; float: left;}
 		.clearfix:after{
 			content: "";
 			display: block;
 			clear: both;
 
 		}
 		</style>
 		
 	</head>
 	<body>
 		<div class="clearfix">
 			<p>abc</p>
 			<p>dev</p>
 			<p>good</p>
 			
 		</div>
 	</body>
 </html>

在这里插入图片描述