多个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叠加效果为准
05-11 08:33