CSS Specificity

 

有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity

CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。

    规则：

 

  HTML标签的权重是1

  Class 的权重是10

  Id 的权重是100

  内敛的权重是1000

 

例如： p 的权重是 1 ，“ div em{} ”的权重是 1+1=2 ，“ strong  .demo{} ”的权重是 10+1=11

“ #test  .red{} ”的权重是 100+10 = 110

 

Specificity hierarchy 权重等级

1.       内敛： Inline styles (Presence of style in document)  An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">

2.       ID 选择器 IDs (# of ID selectors)
ID is an identifier for your page elements, such as #div .

3.       类选择器 Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes , [attributes] and pseudo-classes such as :hover , :focus etc.

4.       元素与伪元素 Elements and pseudo-elements (# of Element (type) selectors).
Including for instance :before and :after . 

 

 

例子：

<style>
  span{font-size:40px;color:green}
  .test{color:red}
</style>
</head>
<span class="test">CSS权重测试</span>

 

 

Span 权重是 1 ， .test 的权重为 10 ，所以“ CSS权重测试 ”的 显示颜色 是 red

 

 

注意：如果 CSS 选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

 

 

参考资料：

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/