看了一些模拟面试的直播,频繁提到关于CSS权值的计算。查询许多文章,结合自己经验,在这里总结一下。
首先在属性后面增加!important该属性就会无条件优先。
<div style="height: 50px;width: 50px;background-color: black">
</div>
div{
background-color: red !important;
}
运行结果如下:
如上案例中div的内联样式background-color为黑色,在CSS中编辑background-color为红色,并在后面添加!important,该属性无条件优先,所以呈现的结果为红色。
排除最特殊的!important后接下来是其他的权值问题
权值相同的情况
当两个属性的权值相同时,后写的会覆盖前面的。
单独权值规则:
- 内联样式,如style="",权值为:1,0,0,0;
- ID的权值为:0,1,0,0;
- 类、伪类、属性的权值为:0,0,1,0;
- 标签的权值为:0,0,0,1;
- 伪对象的权值为:0,0,0,1;
- 通配符的权值为:0,0,0,0;
权值叠加规则:
各位叠加,每位最大为9,过9不进位,所以不算前面提到的!important之外最大的权值数值为9,9,9,9。
权值计算案例:
<ul id="nav" class="nav">
<li class="active" id="first"><a href=""></a></li>
</ul>
- ul{ } 的权值为 (0,0,0,1)
- #nav{ } 的权值为 (0,1,0,0)
- .nav{ } 的权值为 (0,0,1,0)
- ul li{ } 的权值为 (0,0,0,2)
- ul li.active { } 的权值为 (0,0,1,2)
- ul#nav li#first a{ } 的权值为 (0,2,0,3)
以上是个人总结,如有错误,欢迎指正