【H5/CSS】简单了解选择器的优先级
作者：互联网
样式的冲突
- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
案例一：使用类选择器与元素选择器选中同一元素，设置不同颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.red {
color: red;
}
div {
color: yellowgreen;
}
</style>
</head>
<body>
<div class="red">我是一个div</div>
</body>
</html>
可以看到红色优先
选择器的权重
这是因为发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定，谁前面位数越前，则谁越优先，可以看到类选择器优于元素选择器。
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1,0,0,0 |
| id选择器 | 0,1,0,0 |
| 类和伪类选择器 | 0,0,1,0 |
| 元素选择器 | 0,0,0,1 |
| 通配选择器 | 0,0,0,0 |
| 继承的样式 | 没有优先级 |
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,说白就是看谁写得越长，就越优先。
案例二：元素与id选择器进行复合，跟只使用id选择器比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box1 {
background-color: orange;
}
div#box1 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">我是一个div</div>
</body>
</html>
注意点：
选择器的累加不会超过其最大的数量级，比如类选择器再高（有11个）也不会超过id选择器
案例三：同一个选择器优先级比较
如果同一个选择器优先级计算后相同，此时则优先使用靠下的style样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box2 {
background-color: yellow;
}
.box1 {
background-color: orange;
}
</style>
</head>
<body>
<div class="box1 box2">我是一个div</div>
</body>
</html>
使用!important
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，但是在开发中这个玩意一定要慎用！因为一旦确定好优先级，就不方便更改
.box2 {
background-color: yellow !important;
}
.box1 {
background-color: orange;
}
参考
视频链接（P39）
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
标签：优先级,color,H5,样式,background,div,选择器,CSS 来源： https://www.cnblogs.com/PaturNax/p/16556965.html