首页 计算机科学 前端 杂谈

# 多个类名的 div 处理规则

在给同一个 div 容器使用多个类标签时，样式的选取有 “就近原则”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
		.class1{
			background-color: red;
		}
		.class2{
			background-color: yellow;
		}
</style>
<body>
	<div class="class1">这是第一个样式</div>
	<div class="class2">这是第二个样式</div>
	<div class="class1 class2">同时使用两个样式，第一个样式在前，第二个样式在后</div>
	<div class="class2 class1">同时使用两个样式，第二个样式在前，第一个样式在后</div>
</body>

运行结果如图：运行结果

这里可以看出一个 div 标签同时使用两个不同的样式时，使用的是在样式表中最后一个标签 class2，也就是在引用的两个样式中选择了距离这个 div 标签最近的样式（就近原则）。