CSS优先级处理技巧





CSS样式写法: 1.内联 2.在页面中使用style标签 3.使用外部文件,然后引用,引用方式如下 3.1 3.2 元素获得CSS样式途径: 1.直接定义 id、class、元素css 2.继承 为了方便说明,我就放个 p 出来举例好了。 上代码: div id=demodivID class=demodivCp id=demopID class
1.直接定义 id、class、元素css
2.继承

为了方便说明,我就放个 p 出来举例好了。
上代码:
<div id=”demodivID” class=”demodivC”><p id=”demopID” class=”demopC”>我是demo,我自豪。</p></div>
对于上面这个demo。我决定给他修饰个颜色 {color:red}和{color:blue}来让他们竞争一下。
对于这个想法你可以有如下这么那么多种的有效定义方法:

1. body div#demodivID p#demopID{color:red}
2. div#demodivID p#demopID{color:blue}
3. div#demodivID #demopID{color:red}
4. div#demodivID .demopID{color:blue}
5. div.#demodivC #demopID{color:red}
6. p#demopID{color:blue}
7. #demopID{color:red}
8. p.demopC{color:red}
9. .demopC{color:blue}
10. p{color:red}

啊,好多好多,哈哈没事,任贤齐唱到:你不要紧张,你听我慢慢讲:
先上结论:排名 不分先后,1-10优先级呈不可挽回的绝对下降趋势!
来,我们先揪出1和2来对比下,问问为啥呢?why ! 1说:我有魔鬼body我自豪,我优先,然后各个角落,世界各地的男同胞们都举双手赞成拥有魔鬼body的1优先级最高。
2和3对比 3说:我有pp我自豪,专家们一看如此美臀,都一致举双脚赞成!
3和4 对比…只听老实说:非前三名没有YY机会直接忽略。3-10名的直接肉牛满面。在门外的p[arrt]直接跳楼自杀(属性选择符不是很常用,这里为了避免混淆,暂时不论,下面有专业的数据记录)。

下面请看专业分析:
从p的角度看问题,比较优先级: p#demopID>#demopID>p.demopC>.demopC>p
搞清楚了这些,我们就可以举一反三啦!我们先抛弃内联不谈现在从程序的角度分析这个问题:
// e:标签(例如div 等) count:个数
if(this.e#id.count>that.e#id.count)
{ return this; }
else if(this.e#id.count==that.e#id.count)
{
if(this.id.count>that.id.count)
{ return this; }
else if(this.id.count==that.id.count)
{ … }
}

什么你说这个是悲剧的if else;好吧,我承认这个很悲剧,那么就来个通俗易懂版的非专业的说明吧:
先比较元素层级 [标签#idName] 的个数,谁多谁优先级就高,再比较 [#idName] 的个数,接着是 [标签.className] [.className] 最后是 [标签] 个数。也就是说,如果样式1比样式2多一个[标签#idName]那么下面的就不用比较了,样式1就获胜了!然后以此类推。当我们正在如此高兴的类推的时候杀出来一个[内联]的样式 他说,你们在讨论优先级,都不来给我报告一下?一阵霸气压倒了一切,一剑封喉,打败了所有的在场高手。有人拜倒在[内联]的淫威之下,说 [内联]的样式优先级是最高的,忽见一阵暴风刮过,[!important]他不乐意了,上来就把[内联]左右开弓一百六十几个大嘴巴,(具体看不清几个了),把他收拾的服服帖帖的。[内联]只好回到IE6下称王去了
啊,说得好辛苦,什么,您说还是不明白。请让我有1分钟的崩溃时间。 倒数: 60 59 58…
好,下面上专业的数据,用数据来说话:

Order

优先级排序

Selectors

选择器

Compatibility

兼容性

Exsample

示例

Specificity

权重值

1 ID选择符(ID Selectors) All #zyh{content:”My Name”;} 0,1,0,0
2 类选择符 All .zyh{white-space:pre;} 0,0,1,0
2 伪类选择符(Pseudo-Classes Selectors) s a:hover{background:#ccc;} 0,0,1,1
4 类型选择符(Type Selectors) All p{background:#fff url(deeply.png);} 0,0,0,1
5 通配选择符(Universal Selector) All *{ margin:0;padding:0;} 0,0,0,0
– 属性选择符(Attribute Selectors) s p[title]{color:#000;} 0,0,1,1
– 子对象选择符(Child Selectors) s body > p{content:”IfMyBody>pp^_^”;} 0,0,0,2
– 相邻选择符(Adjacent Sibling Selectors) s p + p{border:1px solid #ccc;} 0,0,0,2
– 包含选择符(Descendant Selectors) All
#Love .You{ color:red;}

0,1,1,0
– 选择符分组(Grouping) All #MY,body,.zyh{color:#000;} 0,1,0,0 | 0,0,0,1 | 0,0,1,1

规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
2.!important声明的Specificity值最高,对于支持的浏览器来说,我就是神,哇呼呼呼,谁不支持我呢?当然是IE6啦,你懂的;
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继承而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

算法:
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较