首页 > 代码库 > CSS权重

CSS权重

之前面试碰到的一个题,也算是面试的常见题吧,如下:

说出两个h2的颜色

技术分享

这个题目考察的就是css权重,参考大漠老师的译文:http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

权重计算公式:从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1.著作权归作者所有。

所以#content div#main-content h2的权重是100*2 + 1*2 = 202

  #content #main-content>h2的权重是100*2 + 1 = 201 ,得出,第一个h2的颜色应该是red.

  body #content div[id="main-content"] h2的权重是100 + 10 + 1*2 = 112

  #main-content [class="paragraph"] h2的权重是 100 + 10 + 1 =111

  div #main-content div.paragraph h2.first的权重是100 + 10*2 + 1*3 = 123,得出,第二个h2的颜色应该是pink.

 

CSS权重