多个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叠加效果为准
3755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
