当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
1 CSS
出于 http://www.w3cplus.com/css3/basic-selectors 1.css在屏幕上渲染html,xml 2.css选择器可分为3
Ô­ÎÄ×÷ÕߣºRoger Johansson ×÷Õß¼ò½é£º×¡ÔÚÈðµä¸çµÂ±¤£¬1994Ä꿪ʼ½Ó´¥ºÍ²ÎÓëwebÉè¼Æ£¬456 Berea St
Ô­ÎÄ×÷ÕߣºRoger Johansson ×÷Õß¼ò½é£º×¡ÔÚÈðµä¸çµÂ±¤£¬1994Ä꿪ʼ½Ó´¥ºÍ²ÎÓëwebÉè¼Æ£¬456 Berea St
4 css
该CSS属性用来设定列表样式标记的位置。 值:inside | outside | inherit 可用值 值的说明 outside
5 CSS
  这是开发课程,一要有固定的练习时间,二要多想多练多练多想,(练习时间:学习时间》2:1)。
6 CSS
1、为什么需要样式表 2、概述 3、div标签 4、样式表的基本结构 5、选择器分类 *标签选择器 *类选择
7 CSS
1. 在做层的mask时,上下两个层,如果想第二个层和第一个层重叠显示,第一个层的css为position:abso
8 CSS
较早的网页设计师都还记得有一款专业网页制作软件叫HomeSite吧,TopStyle就是制作HomeSite的原作者
9 css
css CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显
10 CSS
初识“CSS”是在牛腩新闻发布系统中制作前台涉及到的,对于我这个还生活在C/S世界里的人来说,真的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号