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，
然后在比较取舍时按照从左到右的顺序逐位比较
