CSS权重指的是样式的优先级,有两条或者多条样式作用域一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。
权重的等级:
可以把样式的应用方式分为几个等级,按照等级来计算权重。
1)内联样式,eg:style="",权重值为1000
2)ID选择器,eg:#content,权重值为100
3)类,伪类,eg:content,hover权重值为10
4)标签选择器,eg:div,p权重值为1
权重的计算:
<style>
div{
color: blue;
}
.con .box h3{ /* 权重值:10+10+1 */
color: brown;
}
.con h3{ /* 权重值:10+1 */
color: blue;
}
.box h3{/* 权重值:10+1 */
color: pink;
}
</style>
</head>
<body>
<!-- style的权重值为1000 -->
<div style="color: red;">这是一个<div></div></div>
<div class="con">
<div class="box">
<h3>这是一个h3标题</h3>
</div>
</div>
</body>