CSS样式优先级
Posted 、工藤新一
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式优先级相关的知识，希望对你有一定的参考价值。
CSS样式优先级
1.先看选择器是不是作用在目标标签上，选中非目标元素的情况下，离目标越近者优先
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式应用于非目标标签时</title>
<style>
div p{color: red};
#box{color: blue}//权重高 但离目标标签远
</style>
</head>
<body>
<!-- 选中非目标元素的情况下，离目标越近者优先 -->
<div id="box">
<p>
<span>神来之笔</span>
</p>
</div>
</body>
</html>
2.都是作用在目标标签就看权重
权重： 一个!important+10000，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器或者伪元素+1，通配符+0。*
附:（最终权重值是相当于每个属性而言的）
3.都是作用在目标标签并且权重相同就看谁离得近
例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>权重相等的情况下</title>
<style>
/* 权重值：201 */
#box #box2 p{
width: 200px; /* 权重值：201 */
height: 200px; /* 权重值：201 */
background-color: red; /* 权重值：201 */
}
/* 权重值：201,离目标最近 */
#box #box3 p{
width: 200px; /* 权重值：201 */
height: 200px; /* 权重值：201 */
background-color: yellow; /* 权重值：201 */
}
</style>
</head>
<body>
<!-- 同等权重下,靠近目标的优先 -->
<div id="box" class="boxs">
<div id="box2" class="boxs2">
<div id="box3" class="boxs3">
<p></p>
</div>
</div>
</div>
</body>
</html>
附：内联样式、外联样式其实优先级相同，如果上面3条都相同就按css规则后写的生效
总结
- 常用选择器权重优先级：*!important > id > class > tag*
- !important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如：background: blue !important;
- 如果两条样式都使用!important，则权重值高的优先级更高
- 在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
- 样式指向同一元素，权重规则生效，权重大的被应用
- 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
- 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用
以上是关于CSS样式优先级的主要内容，如果未能解决你的问题，请参考以下文章