# CSS 优先级计算
- 权重记忆口诀：从 0 开始，一个行内样式+1000，一个 id 选择器+100，一个属性选择器、class 或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。
- 行内 > 内联 & 外联，其中内联和外联根据加载顺序，后加载的优先级高于先加载的，口诀，离元素最近的优先级高
- 样式应用于非目标标签时，离目标越近者优先，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>样式应用于非目标标签时</title>
<style>
div p {
color: red;
}
#box {
color: blue;
}
</style>
</head>
<body>
<!-- 选中非目标元素的情况下，离目标越近者优先 -->
<!-- span应用的样式，p离span比div离span近，故 div p 生效 -->
<div id="box">
<p>
<span>神来之笔</span>
</p>
</div>
</body>
</html>
- 同等权重下,靠近目标的优先
- 常用选择器权重优先级：
!important>id(100)>class(100)>tag(1) - 如果两条样式都使用
!important，则权重值高的优先级更高 - 同一个 CSS 样式写了两次，后面的会覆盖前面的