详细解读CSS优先级——Web前端系列学习笔记

Posted 2021-06-30 来老铁干了这碗代码

文章目录

• 样式优先级
• 选择器的优先级
• 总结

---

样式优先级

CSS优先级即是指CSS样式在浏览器中被解析的权重不同。

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下所示：

选择器的优先级

CSS选择器的优先级如下所示。

内联样式表的权值最高为 1000；id 选择器的权值为 100；class 类选择器的权值为 10；html 标签选择器的权值为 1 ；

---

总结

• 权值越大越优先
• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
• 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权 高于浏览器所设置的默认样式；
• 继承的CSS 样式权值小于后来指定的CSS 样式；
• 在同一组属性设置中标有“!important”规则的优先级最大；