css学习之路(3)--css如何选择样式（优先级）
这一篇中，当有对同一个元素应用多个样式规则时，如何进行样式选择，以及css(层叠样式表)中层叠的含义
三个基本概念：特殊性，继承，层叠
一、特殊性
<body>
<div>test1</div>
</body>
样式表如下：
body div{color:red;}
div{color:blue;}上面的‘test1’会是什么颜色？-----红色
为什么是红色而不是蓝色？------因为特殊性，对于每一个规则，浏览器都会计算选择器的特殊性，若一个元素有多个冲突属性申明时候，最高特殊属性的申明（规则）被使用。
1.选择器的特殊性计算规则
-
对于选择器中给定的各个ID属性值，加0,1,0,0 对于选择器中给定的类属性，属性选择或伪类，加0,0,1,0 对于选择器中给定的各个元素和伪元素，加0,0,0,1; 结合符，通配符加0,0,0,0 内联样式特殊性（css2.1）为：1,0,0,0
上例中，body div{color:red;}//0,0,0,2;(有效)
div{color:blue;}//0,0,0,1;
对上面计算规则的几组例子
h2.grape{color:purple;}//0,0,1,1(有效)
body h2{color:silver;}//0,0,0,2
————————————————————
html>body table tr[id="totals"] li{color:maroon;}//0,0,1,5
li#answer{color:navy;}//0,1,0,1（有效）左边的值比右边的值要大，如1,0,0,0特殊性大于0,1,0,0；0,1,0,0大于0,0,32,43；
2.重要性
-
在元素属性后面添加!important，用于改变元素的特殊性（如：p.dark{color:#333 !important;background:white;}） 如果多个声明都重要，在每一个声明后面都添加‘!important’(如：p.dark{color:#333 !important;background:white !important;}) 如果一个重要声明与非重要声明冲突，重要声明有效 对于： <h1 class="title">test</h1> 有： h1{color:gray !important}//有效 .title{color:red;}//无效
二、继承
- 即基于继承机制，样式不仅应用到指定元素，还会应用到它的后代元素。 <h1>test1 <em>test2</em></h1> h1{color:gray;} //em元素也是灰色的
- 不是所有的属性都能继承，如border，一般的，大多数盒子模型属性（外边框，内边框，背景，边框）都不能被继承。
- 继承的属性值没有特殊性，甚至连0特殊性都没有，通配符是有0特殊性的 对于 <h1>test1 <em>test2</em></h1> 有 *{color:red;} h1{color:blue;} //em元素为红色，而不是蓝色，通配符有0特殊性，继承连0特殊性都没有
三、层叠
如果两个特殊性相等的两个规则同时运用同一个元素，如何解决这个冲突？
<h1>test1</h1>
h1{color:blue;}
h1{color:red;}
//谁有效？
css所基于的方法是让样式层叠在一起，这是通过结合特殊性和继承做到的。
层叠规则如下：
- 找出所有相关的规则，这些规则都包含 与一个给定元素匹配的选择器
- 按特殊性对应用到该元素的所有声明排序；特殊性越高，权重越大
- 按照出现在文档中的顺序对该元素所有声明排序。一个声明在样式表或文档中越后出现，权重越大
例子如下：
对第3条规则（按特殊性排序）举例：
<h1 id="bright">test</h1>
h1#bright{color:blue;}//特殊性：0,1,0,1
body h1{color:red;} //特殊性：0,0,0,2
//h1为蓝色，而不是红色
对于第4条规则（按顺序）举例：
<h1>test</h1>
h1{color:blue;}
h1{color:red;}
//h1为红色，而不是蓝色
