css代码重用和覆盖有关问题-HTML教程-爱易网页

css代码重用和覆盖有关问题

日期：2014-05-17　浏览次数：20619 次

css代码重用和覆盖问题

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS覆盖TEST</title>
<style>
.b{background-color:green; color:#CCCCCC}
.a .b{background-color:blue}
#a {background-color:green;color:#CCCCCC}
#a #b {background-color:blue}
</style>
</head>
<body>
<div class="a">
	<div class="b" style="background-color:red">测试1</div>
</div>
<div id="a">
	<div id="b" style="background-color:red">测试2</div>
</div>
</body>
</html>

这段测试代码说明了.b{}影响.a .b{}中的文字颜色，但是没有影响背景颜色。
.b{绿}，a .b{蓝}和div自己的style(红)都设置了背景颜色，但最后只显示红；
去掉style(红)之后编程蓝色；再去掉a .b{蓝}之后才变成绿色。
原因是同样的CSS会被覆盖。浏览器使用样式的顺序为.b{绿}—〉a .b{蓝}—〉style(红)而后面的样式把前面的样式覆盖掉了。而在class和id下效果是同样的。