首页 > Web开发 > 详细

CSS Specificity

时间:2015-03-22 14:52:00      阅读:179      评论:0      收藏:0      [点我收藏+]

CSS的specificity特性或称非凡性,它是一个衡量CSS值优先级的一个标准。

其实就是解决冲突,当同一个元素被CSS选择符选中,按照优先权取舍不同的CSS规则。

specificity用一个四位数字串(CSS2是三位)来表示,值从左到右,左面最大,一级大于一
级,数位间没有进制,级别间不可超越。

Inline Styling, Identifiers, Classes, Elements

多个选择符应用于同一个元素上那么specificity值高的最终获得优先级。

 

选择符Specificity值列表:

 

Selectors
选择符
Syntax Samples
语法
ensample
示例
Specificity
特性
通配选择符(Universal Selector) * *.div { width:560px;} 0,0,0,0
类型选择符(Type Selectors) E1 td { font-size:12px;} 0,0,0,1
伪类选择符(Pseudo-classes Selectors) E1:link a:link { font-size:12px;} 0,0,1,0
属性选择符(Attribute Selectors) E1[attr] h[title] {color:blue;} 0,0,1,0
ID选择符(ID Selectors) #sID #sj{ font-size:12px;}  0,1,0,0
类选择符(Class Selectors) E1.className .sjweb{color:blue;} 0,0,1,0
子对象选择符(Child Selectors) E1 > E2 body > p {color:blue;} E1+E2
相邻选择符(Adjacent Sibling Selectors) E1 + E2 div + p {color:blue;} E1+E2
选择符分组(Grouping) E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3
包含选择符(Descendant Selectors) E1 E2 table td {color:blue;} E1+E2

 例子:

h1 {color: red;}  
/* 只有一个类型选择符,结果是 0,0,0,1 */ 
body h1 {color: green;}  
/* 包含选择符,结果是 0,0,0,2 */ 
/*后者胜出*/  

  

另外一些规则:
1.行内样式优先级高于外部定义。 行内样式就是如<div style=”color: red”>blah</div>
,外部定义指经由<link>或<style>标签定义的规则。
2.!important声明的specificity值最高
3.specificity值一样的情况下,按CSS代码中出现的顺序决定,较后的CSS样式会覆盖前面的
CSS样式
4.由继承而得到的样式没有specificity的计算,它低于一切其他规则(比如通配选择符*定
义的规则)

CSS Specificity

原文:http://www.cnblogs.com/AminHuang/p/4357211.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!