css代码重用和覆盖问题

最新推荐文章于 2023-03-07 17:47:17 发布

yobuke

最新推荐文章于 2023-03-07 17:47:17 发布

阅读量303

点赞数

文章标签： CSS 编程浏览器 HTML

<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下效果是同样的。 :wink:
注：样式最好还是使用class编辑，id具有唯一性，也就是说一张网页不能有重复的id。虽然目前浏览器也支持重复id，但这样会影响js操作。