怎样明白CSS层叠款式【html5教程】

CSS层叠性就是浏览器处置惩罚争执的一个特征，在CSS层叠款式争执中有援用体式格局争执，继续体式格局争执，指定款式争执。当指定款式和继续款式调试发作争执以指定款式争执为准

CSS具有三大特征分别为继续、优先级和层叠。本日将要引见的是CSS三大特征中的层叠性，具有肯定的参考价值，愿望对人人有所协助

【引荐课程：CSS教程】

CSS层叠性

CSS层叠性就是浏览器处置惩罚争执的一个特征，假如一个属性中设置了多个选择器，那末这个时刻只会有一个选择器起到作用，其他的选择器都将会被层叠的部份去掉。

层叠性的前提

（1）元素雷同

（2）属性雷同

（3）优先级雷同

层叠性的款式争执

（1）援用体式格局争执

CSS的援用体式格局包含内联款式、内嵌款式、导入款式、链接款式，四个的优先级递次分别是内联款式>内嵌款式>导入款式>链接款式

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
	body{
		background-color: pink;
	}
</style>
<body>
	<h1 style="background-color: red">优先级</h1>
</body>
</html>

效果图以下：

（2）继续体式格局争执

在CSS中有一些属性当给本身设置时会连带着本身的子女都继续上该属性值，比方CSS中设置色彩，字体大小，字体外形，对齐等等这些属性就会继续。但是有关于盒子，定位，规划等属性就不会发作继续

继续体式格局争执就是显现跟本身近来的父元素而不是一切的父元素

例：

<style type="text/css">
		body{
			color: pink;
		}
		#father{
			color: red;
		}
		#grandfather{
			color: blue;
		}
	</style>
</head>
<body>
	<div id="grandfather">
		<div id="father">
			<div>
				<h1>继续争执</h1>
			</div>
		</div>
	</div>

效果图以下：

（3）指定款式争执

有时刻我们在给元素指定款式时会因为权重的差别而发生争执。在这里还需要注重只要当权重雷同时,才会依据“青出于蓝”准绳

<style type="text/css">
		body{
			color:black;
		}
		.father{
			color:yellow;
		}
		#son{
			color:green;
		}
	</style>
</head>
<body>
	<div id="son" class="father">
		<h1>继续争执</h1>
	</div>
</body>

效果图以下：