选择器的权重
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器的权重</title>
<style>
/*
当我们使用不同的选择器选择了相同的元素，又为其同一个样式设置了不同的值，
此时就发生了样式的冲突
发生样式冲突时，显示那个样式，由选择器的权重决定，权重高的优先显示，这其中
内联样式的优先级是最高的，一旦设置则无法在样式表中修改，如果为一个样式添加
了!important则该样式会获得最高的优先级，将会优先于所有的样式显示（慎用）
内联样式 1000
id选择器 100
类和伪类 10
元素 1
通配选择器 0
继承来的样式，没有优先级
对于复合选择器来说，需要将所有的选择器的优先级相加然后在比较
优先级计算时不会超过其最大的数量级，分组选择器中的优先级是独立计算的
如果两个选择器的优先级相同，则使用靠下的样式
*/
p{
color: red !important;
}
div{
background-color: red;
}
#bootom{
background-color: blue;
}
.box{
background-color: yellow;
}
*{
color: black;
}
</style>
</head>
<body>
<p style="color: #00FFFF;">我是p元素</p>
<div id="bootom" class="box">
我是div
</div>
</body>
</html>
标签：优先级,权重,样式,color,background,选择器 来源： https://www.cnblogs.com/YcxyH/p/16247261.html