一、问题提出？
请问div的背景颜色为红色还是绿色呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div style="background-color: green;"></div>
</body>
</html>
答案为绿色。为什么会是绿色呢？难道存在代码执行的先后的覆盖问题？请看第二个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
#demo1{
background-color: red;
}
.demo2{
background-color: green;
}
</style>
</head>
<body>
<div class="demo2" id="demo1"></div>
</body>
</html>
div的颜色为红色。当设置背景颜色的代码互换后div的背景颜色依然是红色。这说明并不是覆盖问题，读者可以自己试一试。
.demo2{
background-color: green;
}
#demo1{
background-color: red;
}
二、问题的解释
在css的样式中存在权重，权重最高的执行相关的代码。
权值是256进制。
| 相关属性 | 权值 | 相关样例 |
|---|---|---|
| !important | Infinity | #only{background-color: yellow!important;} |
| 行间样式 | 1000 | p style = “” /p |
| id | 100 | #demo{} |
| class、属性、伪类 | 10 | .demo{} 、 、a:hover{} |
| 标签、伪元素 | 1 | div{} 、::after{} |
| 通配符 | 0 | *{} |
第一个问题中，由于行间样式的权值要比内联样式的权值要高，所以执行行间样式的代码。第二个问题中，由于id的权值要比class权值高，所以执行id的代码。