样式冲突

当我们用不同的选择器选中了相同的元素，并且对相同样式设置了不同的值时，就发生了样式冲突。如下代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        div{
            color:yellow
        }
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="box1" class="red">我是一个div <span>我是div中的span</span></div>
</body>
</html>

为同一个元素设置颜色，结果如下图，
在这里插入图片描述
显示的是类选择器的设置。

选择器权重

选择器的权重又高到低排序为：
内联样式
id选择器
类和伪类选择器
元素选择器
通配选择器
继承的样式

复合选择器

交集选择器的优先级是相加的，即div#box1的优先级大于#box1。但是多个类选择器的相加并不能比id选择器的优先级高。
并集选择器则是各自计算。

简单理解

选择器选择的内容越具体，它的优先级越高。

相同优先级的情况

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        .yellow{
            color:yellow
        }
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="box1" class="red yellow">我是一个div <span>我是div中的span</span></div>
</body>

结果为红色
在这里插入图片描述
这时把style中选择器位置调换一下，

    <style>
        .red{
            color:red
        }
        .yellow{
            color:yellow
        }
    </style>

变成了黄色。
在这里插入图片描述
所以，当相同优先级的选择器冲突时，最下面的选择器有效。

！important

如果我在样式后面加！important，则可以提高它的优先级。

    <style>
        .red{
            color:red !important
        }
        .yellow{
            color:yellow
        }

    </style>

在这里插入图片描述
注意：慎用！important，因为如果写了它，就没法改了。

原文链接：https://blog.csdn.net/weixin_45034895/article/details/116277265