|
CSS样式写法：
1.内联
2.在页面中使用<style>标签
3.使用外部文件，然后引用，引用方式如下
3.1
3.2
元素获得CSS样式途径：
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...
好，下面上专业的数据，用数据来说话：
规则：
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， 然后在比较取舍时按照从左到右的顺序逐位比较 |
