什么是CSS权重?对于我们实际开发有什么用处?
请带着疑问看下面一段代码
//html代码
<div class = 'box'></div>
//css代码
div{
width:100px;
height:100px;
backgroundcolor:red;
}
.box{
backgroundcolor:green;
}
相信大家都知道这个div一定是绿色,可能你会想说被覆盖了,对没错的确是被覆盖,但究竟是通过什么方式进行覆盖的呢?将class选择器、标签选择器内容调换为什么就改变了呢?这就是今天要探讨的重点——CSS权重
权重:指某一因素或指标相对于某一事物的重要程度
CSS权重:自然就是我们编写的css代码对于dom元素重要的程度,根据不同的重要程度,浏览器决定将什么样的样式作用到dom元素上。
选择器 | !important | 行间样式 | id | class|伪类|属性 | 标签|伪元素 | 通配符(*) |
权重值 | infinity | 1000 | 100 | 10 | 1 | 0 |
当我们通过css选择器选择或是行间样式表等多种不同样式给同一dom元素添加样式时,浏览器会事先比较他们的权重值,哪个大就添加那种样式,当然如果是多个选择器选中则需要这些选择器权重值相加(按256进制)然后在与其他样式比较。
这样上述问题就迎刃而解,无论将class放在哪里由于他的权重值远大于标签选择器,都会作用class的css内容。
!!!注意这里的权重值并不是10进制,而是256进制,因此当遇权重比较时不能进行简单十进制相加后比较。