Web前端之路前端让前端飞

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

2017-02-16  本文已影响445人  爱抽烟的芭比

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属性。

上一篇下一篇

猜你喜欢

热点阅读