1.css权重级:
- id选择器为100
- class选择器为10
- 元素选择器为1
这如何理解呢?
优先级等于所有选择器权重相加。例如:#test.test 的优先级就为110, #test span的优先级就为101,前者大于后者,所有前者优先。
示例
<style>
div#test {
color:red;
}
div.test{
color:orange;
}
</style>
<div class='test' id='test'>文字</div>
文字颜色为红色,因为div#test优先级为101,div.test优先级为11。
2.权重一样,后面的样式优先
示例
<style>
.test#test {
color:red;
}
#test.test{
color:blue;
}
</style>
<div class='test' id='test'>文字</div>
文字颜色为蓝色。
3.元素style属性高于css中的样式
示例
<style>
.test#test {
color:red;
}
#test.test{
color:blue;
}
</style>
<div class='test' id='test' style='color:green;'>文字</div>
文字颜色为绿色。
4.!import优先,高于style属性css中的样式
示例
<style>
.test#test {
color:red !important;
}
#test.test{
color:blue;
}
</style>
<div class='test' id='test' style='color:green;'>文字</div>
文字颜色为红色。