如何屏蔽css覆盖？

CSS的全称叫做“层叠样式表”，但估计很多人都不知道“层叠”二字的含义。其实，“层叠”指的就是样式的覆盖，当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值，这个过程就叫“层叠”。

在我们使用css样式设置网页时，优先级高的css样式会对优先级低的样式进行覆盖。这会对我们的设置有一定的影响，那么我们该如何使css样式不被覆盖呢？如何屏蔽css覆盖？

下面我们来看一下使css样式屏蔽覆盖的方法：

我们可以使用!important方法来提高css样式的优先级屏蔽css覆盖，使css样式不被覆盖。

css样式使用!important设置不被覆盖示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			.aa {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 12px;
				background-color: #FF0000 !important
			}
			
			.bb {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 12px;
				background-color: #FF0000;
			}
		</style>
	</head>

	<body>
		background-color后面加了一个 !important,所以,虽然第一个DIV行内(in line)
		CSS也定义了background-color,但是却是参照外挂的background-color,其它的没有指定 
		!important 的,就被行内的STYLE覆盖掉了.
		<div class="aa" style="background-color:#cc6600;font-size:16px;">
		中Class中包括:!important的样式
		</div>
		<div class="bb" style="background-color:#cc6600">不包括的样式</div>
	</body>

</html>

效果图：