CSS中的权值

可以把权值理解为CSS样式显示的优先程度，权值越大，显示的优先程度越高，浏览器也是根据选择符的权值来判断使用哪种CSS样式，优先显示权值高的CSS样式。

权值

标签的权值为1
类选择符的权值为10
ID选择符的权值为100
继承也有权值，但很低，有的文档记载其值只有0.1，可以理解为继承的权值最低。

权值计算如下所示

<style type="text/css">
    p {color: red;} /*权值为1*/
    p span {color: black;} /*权值为1+1=2*/
    .main {color: blue;} /*权值为10*/
    p span .main {color: blueviolet;} /*权值为1+1+10=12*/
    #container .content p {color: brown;} /*权值为100+10+1=111*/
</style>

层叠

HTML中一个元素设置有多个CSS样式，且权值一致时，处于后面的CSS样式会被应用，可以理解为：后面的样式会覆盖前面的样式。
如下代码最终显示效果是：p中的文本会被设置成green

<style type="text/css">
    p {color: red;} /*权值为1*/
    p {color: green;} /*权值为1*/
</style>

!important

当需要将某样式设置成最高优先级时，可以用!important来处理

<style type="text/css">
    p {color: red !important;} /*权值为1，!important;要写在分号的前面*/
    p {color: green;} /*权值为1*/
</style>

如上所示代码，p内的文本最终会被显示为red。
注意：当网页制作者不设置CSS样式时，浏览器会按照自己的一套样式来显示网页，并且用户也可以在浏览器中设置自己喜欢的样式，此时优先级为：浏览器默认的样式<网页制作者设置的样式<用户自己设置的样式<设置了!important的样式，即!important会使选择符的样式显示优先级最高。