代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px
height: 100px
background-color: red
}
#ee {
background-color: green
}
.qq {
background-color: yellow
}
</style>
</head>
<body>
<div class="qq" id="ee"></div>
<!-- <script>
var aa = document.querySelector('div')
aa.classList.add('ee')
</script>-->
</body>
</html>
背景颜色是以id设置的为准的
按一般伦：ID >Class >标签
如以下样式：
HTML为：
<div id="id1" class="c1">选择器优先权</div>
#id1{color:#f00}
.c1{color:#0f0}
div{color:#00f}
这里，最后输出 的结果为 #f00
如果把选择器改为：
#id1{color:#f00}
#id1 .c1{color:#0f0}
div{color:#00f}
最后，这里输出的颜色为：#0f0
但如果HTML改为：
<div id="id1" class="c1"><b>选择器优先权</b></div>
CSS为：
#id1{color:#f00}
.c1{color:#0f0}
b{color:#00f}
这里最后输出结果即为：
#00f
因为 #id1与 .c1 并没有直接作用于对象上，故最后的结果为 b 的 00f
