选择器权重、样式冲突（选择器优先级）

comegoing-归去兮来

已于 2022-07-30 21:43:57 修改

阅读量209

点赞数

分类专栏：前端css基础文章标签： css css3 前端 html

于 2022-07-13 17:05:02 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125767427

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、知识解释

1、为什么会有优先级

当多个选择器同时对某一个特定属性进行设置，究竟哪一个会显现出来，由优先级规定

2、选择器优先级（列出表格和解释）

（1）!important必须紧跟在属性后，用空格分开，尽量少使用

*{
    color: blue !important;
}

（2）1,0,0,0表示优先级顺序，越靠前优先级越大，可以简单理解为1000，100，10，1，适用于优先级计算

（3）适配选择器就是全选择器，用*表示

（4）特殊情况，当优先级相同时，则优先使用最新样式（代码越靠后，则优先级越高）

（4）以下为常规优先级顺序表

选择器优先级
选择器	优先级
!important	最高优先级，慎用
内联样式	1,0,0,0（1000）
id选择器	0,1,0,0（100）
类\伪类选择器	0,0,1,0（10）
元素选择器	0,0,0,1（1）
适配选择器(全选择)	最低优先级
继承选择器	无优先级

3、多选择器、复合选择器优先级计算

（1）计算规则

交集选择器，相加，但同类型选择器不会超过本类型上限

并集选择器（分组选择器），单独计算

（2）例子

假设，我们对该p元素的class设定11个（以下例子方便具象化理解，非本例）

<p id="p" class="p1 p2 p3">我是一个p元素</p>

错误理解：我们同时对id和class进行设置，按照交集相加原则，11个class相加，结果为1100，按道理已经超过id的1000。

#p{
    color:red;
}
.p1.p2.p3{
    color: blueviolet;
}

正确理解：但是，同类型不会超过上限，也就是id的1000，所以还是id选择器优先

二、代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择器权重（选择器优先级）</title>
        <style>
            .p1{
                color: red;
            }
            #p{
                color: yellow;
            }
            p{
                color: green;
            }
            *{
                color: blue /*!important*/;
            }
            .p1.p2.p3{
                color: blueviolet;
            }
            /* 
            优先级：
            1、内联样式         1,0,0,0
            2、id选择器         0,1,0,0
            3、类\伪类选择器     0,0,1,0
            4、元素选择器        0,0,0,1
            5、适配选择器(全选择)   最低优先级
            6、继承选择器          无优先级
            7、!important       最高优先级，类似于编程语言的全局变量，慎用

            优先级计算
            1、交集选择器，相加，但同类型选择器不会超过本类型上限
            2、并集选择器（分组选择器），单独计算
            */
        </style>
    </head>
    <body>
        <p id="p" class="p1 p2 p3">我是一个p元素</p>
        <div id="div" class="div1 div2">我是一个div元素</div>
    </body>

</html>