华为云前端之旅（五）
【摘要】 CSS 的权重和优先级什么是权重权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。如果两个选择器同时作用到一个元素...
CSS 的权重和优先级
什么是权重
- 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
- 当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。
- 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。
- 如果两个选择器同时作用到一个元素上，权重高者生效。
权重记忆口诀：从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。
- 10000：!important；
- 01000：内联样式；
- 00100：ID 选择器；
- 00010：类选择器、伪类选择器、属性选择器；
- 00001：元素选择器、伪元素选择器；
- 00000：通配选择器、后代选择器、兄弟选择器；
可以看到内联样式（通过元素中 style 属性定义的样式）的优先级大于任何选择器；而给属性值加上 !important 又可以把优先级提至最高，就是因为它的优先级最高，所以需要谨慎使用它，以下有些使用注意事项：
- 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important；
- 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important；
- 永远不要在你的插件中使用 !important；
- 永远不要在全站范围的 CSS 代码中使用 !important；
- 如果两条样式都使用!important，则权重值高的优先级更高
样式重复多写情况
在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的。
不同的权重，权重值高则生效
行内、内联和外联样式优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css优先级</title>
<link rel='stylesheet' href='css/styles.css'>
<style>
div{
background-color: blue;
}
#box{
background-color: green;
}
</style>
</head>
<body>
<!-- 行内样式生效 -->
<div id="box" style="background-color: red;width: 100px;height: 100px;"></div>
</body>
</html>根据权重值来计算，行内样式的权重值最大，所以行内样式生效了。
总结一下：
!important > 行内样式 > 内联样式 and 外联样式
- 样式指向同一元素，权重规则生效，权重大的被应用
- 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
- 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）