多个Class作用于同一个元素的结果分析
多个class作用于同一个元素出现样式冲突，因为权重相同，结果如何呢
【代码】
<html> <head> <style type="text/css"> . bColor{ /*这个在css文件流中位于最前*/ color:green;
font-weight: border; } . aColor{ /*这个在css 文件流 中位于 最后 */
color:red;
font-size: 24px; } </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 */
color:red;
font-size: 24px; }
“ lastClass ”则是依据CSS样式文件流从上往下依次为单个样式属性赋值的
， CSS样式最后的实际显示是以单个样式属性为准的，class只是对元素进行批量赋值，不是CSS样式的实际值， 对于单个css样式属性来说，自然是以最后一次赋值为准
【总结】:
问题中的显示结果 和class属性内class先后无关, 和CSS样式里面 单个样式属性 从上往下 的 先后有关, 同一个样式属性 冲突时 以 CSS样式中写在最后的一次赋值为准, 不同的样式属性 取多个class叠加效果为准