CSS选择符权重
css选择符有个权重,我们习惯于这样书写进行判断——比如a,b,c,d。style标签的内联样式a=1,ID选择符b=1,class选择符c=1,标签(包括伪元素)选择符d=1。举个例子——
body .link{display:block;width:100px;height:100px;background-color:black;} -->0,0,1,1 body .content.link:hover{background-color:blue;} -->0,0,2,2 body .link:hover{background-color:red;} -->0,0,1,2
对于权重计算,采用以下方式——
/** * HTML标签的权重是1 * Class 的权重是10 * Id 的权重是100 * 内联样式的权重是1000 */ body .link{display:block;width:100px;height:100px;background-color:black;} -->0,0,1,1 /* 权重:1 + 10 = 11 */ body .content.link:hover{background-color:blue;} -->0,0,2,2 /* 权重:1 + 10 + 10 + 1 = 22 */ body .link:hover{background-color:red;} -->0,0,1,2 /* 权重:1 + 10 + 1 = 12 */
注意:如果 CSS 选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式。