关于CSS选择符权重规则

关于CSS选择符权重问题

先看下面的代码:

<style  type="text/css">
   div{font:40px red}
   .test{color:green}
</style>
<div   class="test"><p>hello world</p></div>

当选择同样的元素,样式有冲突时会怎么办?上面的例子到底是红色还是绿色?

当设置冲突时,会采用权重高的选择符设置的样式。

权重的规则是这样的

HTML标签的权重是1

class的权重是10

id的权重是100

div  span的权重是1+1=2,而#test a 的权重是100+1=101。

这样的话上述hello world 的颜色大家就明白了吧~~

那要是权重相同的话呢???这个就有点类似于覆盖了,那个样式最后定义,就遵从相应的样式!

原文地址:https://www.cnblogs.com/happycloud/p/3064563.html