CSS——选择器的优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
 
1 内联样式表的权值最高               style=""           1000；
 
2 统计选择符中的ID属性个数。         #id                100
 
3 统计选择符中的CLASS属性个数。      .class             10
 
4 统计选择符中的HTML标签名个数。     标签名              1
 
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
            .c1{
                color: red;
            }
            #i1{
                color: coral;
            }
            div{
                color: greenyellow;
            }
 
            /*.c2 .c3 .c4 span{*/
            /*    color: orange;*/
            /*}*/
 
            .c2 .c4 span{
                color: blue;
            }
 
            .c2 .c3 .c5{
                color: rebeccapurple;
            }
 
            .c2 .c4 .c5{
                color: darkcyan;
            }
 
    </style>
 
</head>
<body>
 
 
<div class="c1" id="i1">item1</div>
 
 
<div class="c2">
    <div class="c3">
        <div class="c4">
            <span class="c5">item2</span>
        </div>
    </div>
</div>
 
 
</body>
</html>

1、有!important声明的规则高于一切。
 
2、如果!important声明冲突，则比较优先权。
 
3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
 
4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
 
5、用数字表示只是说明思想，一万个class也不如一个id权值高