《编写高质量代码》读书笔记系列二低权重规则

CSS设置的样式是可以层叠的，而且我们的CSS选择符也是有权重的：

 

    --------  不同的选择符的样式设置有冲突的时候，会采用权重高的选择符设置的样式

 

 

• HTML标签的权重是 1
• class的权重是10
• id的权重是100
• 内联样式1000

 

举例：

 

• "#test .red"  ---- 权重是100+10 = 110

 

 

1、 案例一：

 

<style type="text/css">
   span{color:red;}
   .test1{color:blue;}
   .test2{color:yellow;}
</style>

<span class="test1 test2">测试数据</span>

 

    CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪种操作符的样式。

 

     --------就近原则是选择符定义的顺序先后，不是挂class名的先后顺序