CSS样式权值的计算

看了一些模拟面试的直播，频繁提到关于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)

以上是个人总结，如有错误，欢迎指正