Web前端面试指导(十三)：css样式的优先级是怎么样的？

题目点评

CSS样式的优先级规则给人的感觉总是摸不透，更不用说怎么去表达了，在网络上流传着很多版本，描述的都很复杂也不全面，看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧！

解答思路

• 样式优先级规则

 1.优先级顺序为：!important>style>权重值

 2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现

权重规则

• 标签的权重为1
• class的权重为10
• id的权重为100

权重取值示例     

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

 

--------------------------------------------------------------------------------------------------------------------