<!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>
/* #box1{
background-color: orange;
} */
/* div#box1{
background-color: yellow;
} */
div{
color: royalblue;
}
.red{
color: red;
}
.d1{
background-color: purple !important;
}
div,p,span{
background-color: yellowgreen;
}
*{
font-size: 50px;
}
div{
font-size: 20px;
}
/*
样式的冲突
-当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突
发生样式冲突时,应该用哪个样式有选择器的权重(也就是优先级)决定
选择器的权重
-内联样式(行内样式) 1,0,0,0
-id选择器 0,1,0,0
-类和伪类选择器 0,0,1,0
-元素选择器 0,0,0,1
-通配选择器 0,0,0,0
-继承的样式 没有优先级
比较优先级时,需要将所有的选择器的优先级进行相加计算,然后优先级越高(分组选择器是单独计算的)
-选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
-选择器写的越具体优先级越高
-
可以在某一样式后面加 !important ,表示其可以获得最高的优先级,不过一定要慎用
样式如果不生效,考虑权重
*/
</style>
</head>
<body>
<!-- <div id="box1" class="red" style="background-color: skyblue;">我是一个div标签</div> -->
<div id="box1" class="red d1 d2 d3 d4" style="background-color: yellow;">我是一个div标签<span>hhhh</span></div>
</body>
</html>
前端——选择器的权重
最新推荐文章于 2022-05-06 15:20:16 发布