IE中，给一个HTML元素同时指定多个class时，样式是怎么确定的

最新推荐文章于 2024-06-06 11:59:30 发布

原创最新推荐文章于 2024-06-06 11:59:30 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文通过一个HTML样例展示了CSS样式表中不同类选择器应用到相同元素时的效果。实验证明，当存在多个样式定义时，后声明的样式会覆盖先前的样式定义，无论在HTML元素中class属性的顺序如何。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
	.wrappertop2{color:blue;}
	.wrappertop{color: red;}
	
	.wrappertop3{color:red;}
	.wrappertop4{color: blue;}
</style>
<title>新增消息</title>

</head>
<body>
		<div class="wrappertop wrappertop2">
			<div class="title">消息名</div>
		</div>
		<div class="wrappertop2 wrappertop">
			<div class="title">消息名</div>
		</div>
		<div class="wrappertop3 wrappertop4">
			<div class="title">消息名</div>
		</div>
		<div class="wrappertop4 wrappertop3">
			<div class="title">消息名</div>
		</div>
</body>
</html>

结果如下图，由此可见，在<style>中后声明的样式是最终效果，而与 class="" 中式样的顺序无关