CSS层叠性（重要）

最新推荐文章于 2024-04-20 12:19:34 发布

纯情小码哥

最新推荐文章于 2024-04-20 12:19:34 发布

阅读量5.3k

点赞数 4

分类专栏： CSS 文章标签： CSS层叠性（重要）

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/102079533

版权

CSS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

CSS层叠性（重要）
指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
原则：
1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。
2、样式不冲突，不会层叠

CSS继承性
写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。
注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0.即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，他拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也主浊说不管权重如何以及样式位置的远近，！important都具有最大优先级。

CSS特殊性（specificity）
关于CSS权重，需要一套公式来计算，由四位的数组成，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者*的值：0，0，0，0
每个元素（标签）值：0，0，0，1
每个类，伪类值为：0，0，1，0
每个ID为：0，1，0，0
每个行内样式值：1，0，0，0
每个!important值：无穷大

1、数位之间没有进制。
2、通过继承的影响的，权重为0，【即样式没有携带有文字标签】如：
.colorRed{
   color:#f00; /* 没有选中p标签，所以只是通过继承影响的，权重为0 */
}
p {
   color:#0f0; /* 权重为1 */
}
<div class="colorRed">
   <p>颜色</p>
</div>

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	#father #son{ /*权重为0,2,0,0*/
		color:blue;
	}
	#father p .c2{ /*权重为0，1，1，1*/
		color:black;
	}
	div .c1 p .c2{ /*权重为0，0，2，2*/
		color:red;
	}
	#father {
		color:green !important; /*继承的权重为0*/
	}

	</style>	
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">颜色</p>
	</div>		
</body>
</html>

效果如下:

纯情小码哥

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠性（重要）

CSS层叠性（重要）指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。原则：1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。2、样式不冲突，不会层叠CSS继承性写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。...
复制链接

扫一扫

专栏目录