CSS选择器的优先级

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

优先级如下：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1、有!important声明的规则高于一切。

2、如果!important声明冲突，则比较优先权。

3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

5、用数字表示只是说明思想，一万个class也不如一个id权值高

优先级说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*在样式中加了!important，优先级最高*/
        p{
            color: blue!important;
        }
        /*id选择器优先级第三高*/
        #i1{
            color: blueviolet;
        }
        /*类选择器优先级第四高*/
        .c1{
            color: aqua;
        }
        /*标签选择器优先级第五高*/
        p{
            color: chartreuse;
        }
        /*通配选择器第六高*/
        *{
            color: chocolate;
        }
    </style>
</head>
<body>
<!--行内样式优先级第二高-->
<p style="color: red" id="i1" class="c1">youxianji</p>
</body>
</html>
posted @ 2021-12-26 23:50  A熙  阅读(782)  评论(0)    收藏  举报