css代码重用和覆盖有关问题
日期：2014-05-17 浏览次数：21047 次
css代码重用和覆盖问题
这段测试代码说明了.b{}影响.a .b{}中的文字颜色，但是没有影响背景颜色。
.b{绿}，a .b{蓝}和div自己的style(红)都设置了背景颜色，但最后只显示红；
去掉style(红)之后编程蓝色；再去掉a .b{蓝}之后才变成绿色。
原因是同样的CSS会被覆盖。浏览器使用样式的顺序为.b{绿}—〉a .b{蓝}—〉style(红)而后面的样式把前面的样式覆盖掉了。而在class和id下效果是同样的。
注：样式最好还是使用class编辑，id具有唯一性，也就是说一张网页不能有重复的id。虽然目前浏览器也支持重复id，但这样会影响js操作。
<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下效果是同样的。
注：样式最好还是使用class编辑，id具有唯一性，也就是说一张网页不能有重复的id。虽然目前浏览器也支持重复id，但这样会影响js操作。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
