html中style的优先级(覆盖关系)

html中的元素可以通过设置class和id来赋予style属性。

多个元素可以同属一个class。

一个id只能赋值给一个元素。

当给一个元素赋予一个class的时候,它便拥有了class所给予它的style。

<div class = "class1"></div>


一个元素可以被赋予多个class:

<div class="class1 class2 class3"></div>

如果这些class的style有重合的话,后面赋予的class会把前面class的style中重合的部分给替换掉。


如果标签的id和该class中的style有重合的话,重合部分的style会使用id的style:

<div class="class1 class2 class3" id="id1"></div>

此时,该元素起效的是id赋予的style。


也可以直接给元素赋予style:

<div class="class1 class2 class3" id="id1" style="color:red">

此时,直接赋值的style会把class和id中的重合部分给替换掉。


在class和id中设置style的时候有一个用法是:!import

如:. class1{  color:red  !import }

如果有 !import属性存在的话,它将拥有最高优先级。会覆盖其他方法设置的style属性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,347评论 19 139
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,714评论 0 17
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,906评论 18 399
  • 感恩冥想 1、感恩爸爸妈妈给了我生命,祝福爸爸妈妈身体健康,祝福天下父母皆吉祥安康 2、感恩奶奶对我的不断激励,祝...
    栾宜阅读 916评论 0 0
  • 昨天晚上IT届最知名的相声大会在深圳召开,这是一场欢乐祥和,催人奋进,感人至深的大会!在这次大会上,罗永浩同志发布...
    北邮老土阅读 3,865评论 0 0