如何使css样式不被覆盖？

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<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>

效果图：