多个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 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?

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

  5. CSS3使用AnimationEnd为同一个元素添加多个动画效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  6. jQuery给同一个元素两个点击事件

    $(".course-form .course-start img").each(function(i) { $(this).toggle(function(){ $(this). ...

  7. 用jquery写循环播放div -2

    前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace" 在 ...

  8. CSS选择器特殊性与重要性

    特殊性 在编写CSS代码的时候,我们会出现多个样式规则作用于同一个元素的情况,例如 <!-- HTML --> <header> <nav class="nav ...

  9. 网页布局:float与position的区别

    网页开发中布局是一个永恒的话题.巧妙的布局会让网页具有良好的适应性和扩展性.css的布局主要涉及两个属性——position和float.它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明 ...

随机推荐

  1. Android网络文件下载模块整理

    一.知识基础 tomcat服务器配置 理解http协议 理解javaIO操作相关知识 SDcard操作知识 Android 权限配置 二.实现步骤 1.从网上获取资源 public String do ...

  2. 定时备份SQL SERVER的数据库并且把备份文件复制到另外一台服务器

    需求介绍:每天备份线上正式库并且把备份文件复制到测试服务器,测试服务器自动把数据库备份文件还原. 方案介绍: 第1步:在正式库上创建存储过程用来备份数据库和复制到测试服务器,然后新建作业每天定时执行创 ...

  3. Android开发--Adapter的应用

    1.简介 Adapter的作用是为GridView,ListView等界面控件与数据之间搭建桥梁,每当列表里的每一项显示到页面时,都会调用到Adapter的getView方法 返回一个View.在An ...

  4. 在 Windows 環境下利用 VNC 遠端控管 Mac OS X Server

    Mac OS Server 可以使用 VNC 來遠端控管.不過,在 Mac 上打開這個功能很簡單,要讓 Windows 的 VNC Viewer 連上卻很難,原來是有原因的. 首先我們來看怎麼在 Ma ...

  5. CURLcode curl_easy_setopt(原创)

    中文翻译: curl_easy_setopt() libcurl 手册 curl_easy_setopt() 名称 curl_easy_setopt -curl的设置选项 概要 #include &l ...

  6. Canvas drawText实现中英文居中

    @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint mTextPaint = new Paint( ...

  7. 用.NET开发通用Windows App

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:随着Windows 10的正式发布,作为.NET开发人员应该开始或多或少了解一下通用( ...

  8. 手动启动mongodb和nodejs程序

    最近做单片机去了,以前用的mongodb和nodejs没有配置成服务,居然忘了如何手动启动.在此记录下 一.手动启动mongodb 1.进入cmd 2.在dos下打开mongodb路径E:\mongo ...

  9. 【Mysql】日期时间格式化

    1.日期转成指定格式:DATE_FORMAT(date, format) 2.int型时间转成指定格式:FROM_UNIXTIME(unix_timestamp,format) 根据format字符串 ...

  10. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...