计算权重的方法

三. 层叠和继承

继承

父元素拥有了某个css属性，子元素不需要任何条件的情况下都会拥有父元素的属性。

并不是所有的css属性都能继承，可以被继承的css属性有以下：

color  text-  line-  font-   -->都是跟文字属性相关。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.d1 {
			color: red;
		}
		.d1 span {
			font-size: 100px;
		}
	</style>
</head>
<body>
	
	<div class="d1">
		<!-- span继承了div.d1的color属性 -->
		<span>Hello,span</span>
	</div>
</body>
</html>

其它的关于盒子、定位、布局的属性不能被继承。

层叠

是css处理冲突的一种解决方案。需要通过计算权重来解决层叠的问题。

计算权重的第一步

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*计算权重第一步比较id class html 选择器的数量*/
		#d1 .d2 p {
			color: red;
		}
		/*1 1 1*/
		div div #d3 p {
			color: green;
		}
		/*1 0 3*/
		div.d1 div.d2 div.d3 p {
			color: blue;
		}
		/*0 */
	</style>
</head>
<body>
	<div class="d1" id="d1">
		<div class="d2" id="d2">
			<div class="d3" id="d3">
				<p>div-div-div-p</p>
			</div>
		</div>
	</div>
</body>
</html>

结果：

计算权重1

计算权重的第二步

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*计算权重第二步，如果权重一样，那么后出现的会覆盖掉先出现的*/
		#d1 #d2 p {
			color: red;
		}
		#d2 #d3 p {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="d1" id="d1">
		<div class="d2" id="d2">
			<div class="d3" id="d3">
				<p>div-div-div-p</p>
			</div>
		</div>
	</div>
</body>
</html>

结果：

计算权重2

计算权重第三步

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*比较权重第三步：看选择器是否直接选中目标元素，如果没有选中目标元素，那么他们的权重为0*/
		#d1 #d2 #d3 {
			color: red;
		}
		div.d1 div.d2 div.d3 {
			color: blue;
		}
		p {
			color: green;
		}
	</style>
</head>
<body>
	<div class="d1" id="d1">
		<div class="d2" id="d2">
			<div class="d3" id="d3">
				<p>div-div-div-p</p>
			</div>
		</div>
	</div>
</body>
</html>

结果：

计算权重3

计算权重第四步

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*计算权重第四步：如果都没有选中，那么谁离目标元素近就听谁的*/
		#d2 #d3 {
			color: red;
		}
		#d1 #d2 {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="d1" id="d1">
		<div class="d2" id="d2">
			<div class="d3" id="d3">
				<p>div-div-div-p</p>
			</div>
		</div>
	</div>
</body>
</html>

结果：

计算权重4

总结

先看有没有选中目标元素，如果选中，比较权重，谁的权重大听谁的。如果权重一样，谁写在后面听谁的。
如果没有选中目标元素，那么权重为0，如果所有的权重都为0，就近原则，谁离目标元素近听谁的。

权重总结