样式的冲突
- 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
*{
font-size: 30px;
}
div{
background-color: cornflowerblue;
font-size: 10px;
}
.red{
background-color: red;
font-size: 20px;
}
#box{
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="box" class="red d1 d2 d3">我是div</div>
</body>
</html>
- 比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的),
选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
div#box{
background-color: cornflowerblue;
font-size: 10px;
}
div,p,span{
background-color: chocolate;
}
.red{
background-color: red;
font-size: 20px;
}
#box{
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="box" class="red d1 d2 d3">我是div</div>
</body>
</html>
- 可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式,
注意:在开发中这个玩意一定要慎用!
.d1{
background-color: purple !important;
}