多个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叠加效果为准

多个Class作用于同一个元素的结果分析的更多相关文章

  1. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  2. 为什么margin-top不是作用于父元素

    为什么margin-top不是作用于父元素:建议:尽可能的手写代码,可以有效的提高学习效率和深度.至于margin-top属性的基本用法再简单不过,那就是设置一个对象的上外边距,看下面的代码实例: & ...

  3. css两个紧挨着的css选择器修饰同一个元素

    #status, .commands{ height: 25px; line-height: 25px;}.upload .commands{ float: right;}.hidden{ displ ...

  4. 为什么子元素设置margin-top会作用在父元素上？

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. 多个线程作用于同一个runnable对象

    多个线程作用于同一个runnable对象 学习了:https://www.cnblogs.com/ligang305/archive/2012/08/10/2632126.html http://as ...

  6. 弯道超车，换一个思路，避免addEventListener为同一个元素重复赋予事件

    addEventListener可以给同一个元素赋予多次同一个事件. 执行一次,就多一次事件效果.这不是我想要的. window.onload = function(){ var box = docu ...

  7. JS---DOM---为同一个元素绑定多个不同事件指向同一个事件处理函数

    为同一个元素绑定多个不同事件指向同一个事件处理函数 1. 用了switch(e.type){} 来修改 2. break <input type="button" value ...

  8. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  9. 子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

随机推荐

  1. UBER的故事

    今天分享一个很好的视频,19分钟,这个视频讲了过去几年一家伟大公司的成长的思路,这个演讲的PPT很棒,演讲者的语速.语调.表情等也非常适合大家在日常工作中学习.   链接:http://v.youku ...

  2. java第三周学习

    这一周学习的是java数组面向对象 数组中存放的数据的类型:既可以是基本数据类型也可以是引用数据类型. 数组的定义方式: 1 数据类型[] 数组名; 2 数据类型 数组名[]; 数组的初始化: 1.静 ...

  3. 关于repaint(重绘)和reflow( 回流)

    repaint就是重绘,reflow就是回流.repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排 严重性: 在性能优先的前提下,性能消耗 reflow大于re ...

  4. 【BZOJ-3270】博物馆 高斯消元 + 概率期望

    3270: 博物馆 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 292  Solved: 158[Submit][Status][Discuss] ...

  5. BZOJ3434 [Wc2014]时空穿梭

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. Beta阶段项目展示

    1.团队简介 韩青长 前端工程师 我是韩青长,技术小白,抱着对软工的好奇和对未来工作的憧憬选了这门课.暂时选择了测试的工作,也对开发和UI有一定兴趣.从前上帝创造了我们,现在轮到我们来创造自己的软件了 ...

  7. UVA1225

    每增加1个整数,所有位上的对应数都加一.建立一个10000列10行的表,然后查表就可以了. #include<stdio.h> #include<string.h> ][]; ...

  8. Docker 学习之命令详解

    1. docker version docker version 显示 Docker 版本信息. 2. docker info docker info 显示 Docker 系统信息,包括镜像和容器数. ...

  9. 疯狂Java笔记

    第四章: 4.6深入数组 1.栈内存和堆内存 每个方法都会建立自己的内存栈,在这个方法内定义的变量会逐个放入栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁.因此,所有在方法中定义的局部变量 ...

  10. 打开gvim发现菜单栏是乱码

    默认安装将会把中文区域设置为zh_CN.utf8,而GVim能识别的中文区域设置为zh_CN.UTF-8.因此GVim会在启动时报错,且 无法正常加载中文菜单.解决方案:Linux下编辑 ~/.vim ...