权重问题深入-CSDN博客

本文链接：https://blog.csdn.net/2301_80227523/article/details/139173483

同一个标签，携带了多个类名，有冲突：

这里需要补充两种冲突的情况：

1.对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁

2.对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

（就近原则详细见专栏CSS样式表的继承性和重叠性）

!important标记：优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            color:red;
        }

        .hezi{
            color:blue;
        }

        p{
            color: green;
        }
    </style>
</head>
<body>
    <p class="hezi" id="box">我的颜色是</p>
</body>
</html>

上面这段代码中，id选择器的权重最大，所以文字的颜色是红色。

如果我们想将文字的颜色显示为绿色，只需要给标签选择器的加一个!important标记，此时其权重为无穷大。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            color:red;
        }

        .hezi{
            color:blue;
        }

        p{
            color: green !important;
        }
    </style>
</head>
<body>
    <p class="hezi" id="box">我的颜色是</p>
</body>
</html>

具体语法如下：

k:v !important；

给一个属性提高权重，这个属性的权重就是无穷大

font-size:60px; !important; 错误的示范，不能把!important写在外面

需要强调的如下3点：

1.!important提升的是一个属性，而不是一个选择器

2.无法提升继承的权重，该是0还是0；

3.不影响就近原则

个人觉得3是有点难理解的，所以下面附代码提供参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red !important;
        }

        ul{
            color:green;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>猜猜什么颜色</li>
        </ul>
    </div>
</body>
</html>

结果是绿色的字体；或许这样你就可以看懂了。

GitHub大佬的叮嘱：做网站的时候，!important尽量不要用，否则会让css写的很乱

这是学习笔记，所以和GitHub大佬总结的会有很多相似之处，所以附上链接