多个Class作用于同一个元素的结果分析
多个Class作用于同一个元素的结果分析
多个class作用于同一个元素出现样式冲突，因为权重相同，结果如何呢
【代码】
<html>
<head>
<style type="text/css">
.bColor{ /*这个在css文件流中位于最前*/
color:green;
<head>
<style type="text/css">
.bColor{ /*这个在css文件流中位于最前*/
color:green;
font-weight:border;
}
.aColor{ /*这个在css文件流中位于最后*/
}
.aColor{ /*这个在css文件流中位于最后*/
color:red;
font-size:24px;
}
</style>
</head>
<body>
<b class="aColor bColor">alex</b>
</body>
</html>
}
</style>
</head>
<body>
<b class="aColor bColor">alex</b>
</body>
</html>
最后alex的显示效果是alex
【详细分析】：
其实对于浏览器来说，两个或多个class在最后都会合成一个“class”，我们暂且称之为“lastClass”，
由于两者权重（也就是优先级的计算结果）相同，我们可以知道最后的显示效果完全是两个class的并集，我们往下继续分析：
aColor + bColor -合成-> lastClass
等价于：
<b class="lastClass">alex</b>
因为不管是aColor还是bColor都只是lastClass的一部分，因此我们可以将上文中的样式修改如下：
.lastClass{ /*这个原来是bColor*/
color:green; /*这个color在后面被重写了，所以失效*/
font-weight:border;
}
.lastClass{ /*这个原来是aColor*/
}
.lastClass{ /*这个原来是aColor*/
color:red;
font-size:24px;
}
}
“lastClass”则是依据CSS样式文件流从上往下依次为单个样式属性赋值的
，CSS样式最后的实际显示是以单个样式属性为准的，class只是对元素进行批量赋值，不是CSS样式的实际值，对于单个css样式属性来说，自然是以最后一次赋值为准
【总结】:
问题中的显示结果和class属性内class先后无关,和CSS样式里面单个样式属性从上往下的先后有关,同一个样式属性冲突时以CSS样式中写在最后的一次赋值为准,不同的样式属性取多个class叠加效果为准
