CSS层级关系

Stirve unremitting

于 2020-03-14 22:59:11 发布

阅读量643

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_46421045/article/details/104870492

版权

笔记专栏收录该内容

96 篇文章

订阅专栏

本文深入探讨了CSS中选择器的层级关系，包括样式优先级的计算方法，如何通过类选择器、ID选择器和内联样式来控制样式覆盖，以及在复杂页面布局中管理样式冲突的策略。通过学习，读者将能更好地理解和应用CSS的层级规则。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box1{
				width: 100px;
				height: 300px;
				background: red;
				/*margin-left:100px;*/
				position:absolute;
				top:100px;
				left:100px;
				z-index:3;
			}
			.box2{
				width: 300px;
				height: 100px;
				background: blue;
				/*margin-top:-140px;*/
				position:relative;
				top:150px;
				left:10px;
				z-index:4;
				
				
			}
			.btn1{
				width: 300px;
				height: 100px;
				background: red;
				position:relative;
				top:100px;
				left:100px;
				/*z-index:100;*/
			}
			.btn2{
				width: 100px;
				height: 300px;
				background: pink;
				position:absolute;
				top:-40px;
				left:30px;
				z-index:-3;
			}
		</style>
	</head>
	<body>
		<!--
			z-index:层级;
			有定位的元素才可以修改层级关系
			并列关系修改任何一个元素都ok
			嵌套关系只能修改子集才能改变层级关系
		-->
		<!--并列关系-->
		<!--<div class="box1"></div>
		<div class="box2"></div>-->
		
		<!--嵌套结构-->
		<div class="btn1">
			<div class="btn2"></div>
		</div>
	</body>
</html>