前端的学习之路：初级CSS---选择器的权重
程序员文章站
2022-05-10 11:02:19
...
选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.18.02.css"> -->
<style>
/*
样式的冲突
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
发生样式冲突时，引用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式（行内样式） 1,0,0,0 1000
id选择器 0,1,0,0 100
类和伪类选择器 0,0,1,0 10
元素选择器 0,0,0,1 1
通配选择器 0,0,0,0 0.1
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器（并集选择器）是单独计算的，不累加）
选择器 累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先级使用靠下（在style中的位置靠下）的样式
可以在某一个样式的沟边添加！important ，则此时该样式获取到最高的优先级，甚至超过内联样式
注意：在开发中一定要慎用
*/
#box1{
color: hotpink;
background-color: orange;
}
div #box1{
background-color:blue;
}
.d1{
background-color: purple !important;
}
div,span{
background-color: yellowgreen;
}
.red{
background-color: red;
}
*{
font-size: 50px;
}
div{
font-size: 100px;
}
</style>
</head>
<body>
<div id="box1" class="red d1 d2 d3 d4">
我是一个div
<span >我是div中的span</span>
</div>
<!-- span听通配选择器的，因为继承低于通配选择器的优先级 -->
</body>
</html>
运行结果为：
上一篇： Java学习第12天
下一篇： java学习第12天