为什么关注优先级

· 不同的选择器组合修改同一个元素的同一个属性，谁说了算？

p {
color: yellow
}

#app p {
color: red;
}

.header .user {
color: blue;
}
</style>

优先级顺序大原则

!important > 内联样式 > 选择器设置样式 > 浏览器默认样式 > 来⾃继承的样式

如果优先级完全相同，后⾯的覆盖前⾯的

选择器权重计算

• 千位： 如果声明在 style 的属性（内联样式）则该位得⼀分

• 百位： 选择器中包含ID选择器则该位得⼀分

• ⼗位： 选择器中包含类选择器、属性选择器或者伪类则该位得⼀分

• 个位：选择器中包含标签选择器、伪元素选择器则该位得⼀分

计算范例1

#detail span { /*101*/
color: red;
}

#detail.box > span.title { /*121*/
color: blue;
}

.box span:hover { /*021*/
color: yellow;
}

#detail span#title { /*201*/
color: pink;
}

</style>

<p id="detail" class="box">

<span class="title" id="title" >饥⼈⾕</span>

</p>