同一个标签，携带了多个类名，有冲突：
这里需要补充两种冲突的情况：
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大佬总结的会有很多相似之处，所以附上链接
标签：权重,color,标签,问题,important,深入,样式表,选择器 From： https://blog.csdn.net/2301_80227523/article/details/139173483