CSS初学笔记：css的继承性和层叠性

最新推荐文章于 2023-06-20 21:33:40 发布

七月是我的生日

最新推荐文章于 2023-06-20 21:33:40 发布

阅读量685

点赞数

分类专栏： css初学文章标签： css初学笔记 css的层叠性 css继承性

本文链接：https://blog.csdn.net/qq_43955202/article/details/85345185

版权

css初学专栏收录该内容

4 篇文章 1 订阅

订阅专栏

CSS学习笔记：
CSS继承性和层叠性
css的继承性。
1.css继承性：css某些样式属性可以给祖先元素设置，可以直接从祖先继承这些属性。
案例：

.box{
			/*盒子属性*/
			width: 300px;
			height: 400px;
			background-color: red;
			border: 1px solid black;
            /*文字属性*/
            color: white;
            font-size: 30px;
            font-family: "Arial","Microsoft Yahei"
          }
<div class="box">
	<p>css的继承性1</p>
	<p>css的继承性2</p>
	<p>css的继承性3</p>
	</div>

页面效果：
在这里插入图片描述
元素审查：
box属性：

标签p继承属性：

注意点：
1.Inherited from div.box：表示文字属性从div.box继承而来。
2.可以继承的属性：文字属性例如font系列，text系列，line系列，color等；
不可以继承的属性：盒子属性例如width，height，background系列，border，浮动等均不能继承。
3.css的继承性是比较好用的属性，可以简化代码书写，有些杨树可以直接给祖先设置，他的后代都会具有这种属性样式。
CSS的层叠性
1.css层叠性：同一元素可以被不同的选择器选中，相同样式，权重高的会层叠掉权重低的。
案例：
同一元素被不同选择器选中，设置相同样式属性，最终会如何显示？
代码：

<div class="box">看看我是什么颜色？</div>
div{
			color: red;
		}
.box{
			color: blue;
		}
#box{
			color: yellow;
		}

效果图：
在这里插入图片描述
结论：***div和.box以及#box***都选中了同一个元素，设置文字颜色，最终颜色显示黄色。
Why？？？
因为css的层叠性，相同的样式属性，谁的权重高就听谁的。（权重指选择器的针对性，针对性越强权重越高 id选择器>类选择器>标签选择器）
注意：当三种标签的数量相同时，那种样写在后面听谁的。
附加：不同选择器设置一个元素具有叠加性：
代码：

div{
			color: red;
			font-size: 20px;
		}
		.box{
			border: 1px solid blue;
		}
		#box{
			background-color: pink;
		}

效果图;
在这里插入图片描述
①如何判断选择器的权重？
元素一次被选中判断权重，一次比较id选择器，类选择器，标签选择器的数量。
案例：

<div class="box1" id="box1">
		<div class="box2" id="box2">
			<div class="box3" id="box3">看看我是什么颜色？</div>
		</div>
</div>
<style>
	/*（id数量,类数量，标签数量）*/
	/*元素被选中看权重*/
	.box1 .box2 .box3{
		color: red;       /*（0，3，0）*/
	}
	.box1 #box2 .box3{    
		color: orange;    /*（1，2，0）
		因为id数量为1，大于其他样式，权重最高，所以最终样式为橘色*/
	}
	.box1 div div{
		color: pink;      /*（0，1，2）*/
	}
</style>

在这里插入图片描述
元素审查：

②元素没有被选中
如果元素没有被选中，权重为0，那么看的是元素的继承性。元素没有被选中，从哪里继承看（html结构，从距离最近的选择器继承）【就近原则】
案例：
三个选择器都没有选中元素：显示颜色靠继承性。
代码：

<body>
	<div class="box1" id="box1">
		<div class="box2" id="box2">
			<div class="box3" id="box3">看看我是什么颜色？</div>
		</div>
	</div>
	
</body>
body{
			color: red;
		}
		#box1{
			color: green;
		}
		.box1 .box2{
			color: blue;
		}

在这里插入图片描述
注意：当元素没有被选中，但是距离相等时，看选择器的权重。
并集选择器：

/*并集选择器，拆开看权重*/
		.box1 .box2,#box1 .box2{
			color: red;
		}
		/*等价写法*/
		.box1 .box2{
			color: yellow;
		}
		#box1 .box2{
			color: yellow;
		}

在这里插入图片描述
2018.12.29

七月是我的生日

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS初学笔记：css的继承性和层叠性

CSS学习笔记：CSS继承性和层叠性css的继承性。1.css继承性：css某些样式属性可以给祖先元素设置，可以直接从祖先继承这些属性。案例：.box{ /*盒子属性*/ width: 300px; height: 400px; background-color: red; border: 1px solid black; /*文字...
复制链接

扫一扫