同一个标签,携带了多个类名,有冲突:
这里需要补充两种冲突的情况:
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大佬总结的会有很多相似之处,所以附上链接