当前位置:首页 > 开发 > Web前端 > Css > 正文

CSS Specificity

发表于: 2012-06-29   作者:周凡杨   来源:转载   浏览:
摘要:   有时候对于页面元素设置了样式,可为什么页面的显示没有匹配上呢? because specificity CSS 的选择符是有权重的,当不同的选择符的样式设置有冲突时,浏览器会采用权重高的选择符设置的样式。     规则:   HTML标签的权重是1 Class 的权重是10 Id 的权重是100

 

有时候对于页面元素设置了样式,可为什么页面的显示没有匹配上呢? 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/

 

 

CSS Specificity

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号