1.样式的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 样式的冲突：选择不同的选择器，选中相同的元素，并且为相同的样式设置不同值时，发生样式的冲突
发生冲突时，由选择器的权重决定
选择器权重：
内联样式： 1,0,0,0 <p style=""></p>
id选择器： 0,1,0,0 #box{}
类和伪类选择器： 0,0,1,0 .box{}
元素选择器： 0,0,0,1 p{}
通配选择器 0,0,0,0 *{}
继承的样式： 没有优先级
比较优先级时，所有选择则其的优先级进行相加计算
选择器的累加并不会超过最大的数量级，类选择器再怎么加也不会超过id选择器
如果优先级计算后相同，优先使用靠下的样式
可以在某一个样式后面添加 !important 此时该样式会获取到最高的优先级，甚至超过内联样式
但尽可能不要用
-->
<style>
#box{
background-color: coral;
}
div#box{
background-color:burlywood;
}
div{
background-color: aqua;
}
.red{
background-color: blue;
}
/* div是类选择器，而red是元素选择器 */
/* 不会跨数量级，比如11个类选择器一起，并不会比id选择器高 */
</style>
</head>
<body>
<div id="box">哈啊</div>
</body>
</html>
2.颜色
Document
