1、 Css基础
1.1 CSS（层叠样式表 Multiple Styles）
CSS 是 Cascading Style Sheets(层叠样式表)的简称。
CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行。
CSS 文件也可以说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必须使用 css 为文件名后缀。
1.2 CSS权值、CSS优先级
CSS的权值设计到浏览器解析CSS 优先级的问题，当选择器权值越大则优先级越大，最直接的体现是设定后的CSS后却没有效果，样式失效，样式冲突，
这种问题一般发生于新手，很多情况下是忽视了CSS中的权重 specificity；
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #btnFirst{ 8 backgroud-color:red; 9 } 10 /* 11 #btnFirst 12 { 13 background-color: blue; 14 } 15 */ 16 #button-group button{ 17 18 background-color: green; 19 } 20 21 </style> 22 </head> 23 <body> 24 <div id="button-group"> 25 <div> 26 <button type="button" id="btnFirst" class="btn">提交</button> 27 </div> 28 <button type="button" class="btn">提交</button> 29 </div> 30 </body> 31 </html>
如上显示提交按钮为绿色；
下面是权值的规则：
- 通配选择符的权值 0,0,0,0
- 标签的权值为 0,0,0,1
- 类的权值为 0,0,1,0
- 属性选择的权值为 0,0,1,0
- 伪类选择的权值为 0,0,1,0
- 伪对象选择的权值为 0,0,0,1
- ID的权值为 0,1,0,0
- important的权值为最高 1,0,0,0
计算规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。
从上面我们可以得出两个关键的因素：
- 权值的大小跟选择器的类型和数量有关；
- 样式的优先级跟样式的定义顺序有关；
为了方便整理顺便提下样式的优先级
永记在心： important > 内联 > ID > 类|属性|伪类 > 标签|伪元素 > 通配符 > 继承
简单记住这几个就够用了： important > 内联 > ID > 类|属性|伪类 > 标签|伪元素
important > style="" >#first > .myClass | [type='button'] | :hover > input | ::after
1.3 关于继承
除了直接指定到元素上的样式规则以外，每个属性值还有一个可能为 inherit(继承) 的值。表示元素的该样式属性继承自父级元素，与父级元素的定义一致。比如：
<style> .list .item { color: red } </style> <ul class="list"> <li class="item"> <span>某些文字</span> </li> </ul>
上例中，样式规则并未针对 span 标签指定 color 属性， 但是 span 中的文字会显示为红色， 这就是因为 span 的 color 属性默认值为 inherit.
对于 inherit 的属性，只要记住一点： 继承而来的属性值，权重永远低于明确指定到元素的定义。只有当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。例如：
1 <style> 2 3 span { color: blue } 4 5 .list .item { color: red } 6 7 8 9 </style> 10 11 <ul class="list"> 12 13 <li class="item"> 14 15 <span>某些文字</span> 16 17 </li> 18 19 </ul>
同样的例子， 第一条规则的权重是 0,0,0,1, 第二条规则的权重是 0,0,2,0. 虽然第二条规则的权重更高，但是它是针对 li 元素的直接指定，并不是针对 span 元素定义的，所以计算 span 的 color 属性权重值时，实际上就是 inherit 的红色与直接指定的蓝色的对比。按照规则，只要有直接指定的值（蓝色），就不会再取继承的值（红色），所以 span 中的文字显示为蓝色。
这条规则最典型的场景就是链接文字的颜色。由于一般浏览器自带的样式表都有针对a 标签的颜色及下划线的直接指定，所以网页样式表中对 a 标签的父级元素指定color 属性及 text-decoration 属性，通常不会起作用。但是我们可以通过下面的reset 来改变这一点：
1 <style> 2 a { color: inherit; text-decoration: inherit } 3 4 .item { color:red } 5 6 </style> 7 <p class="item"><a href="#">链接文字</a></p>
在上例中，由于我们的样式表对 a 标签直接指定了 color 和 text-decoration 属性值， 覆盖了浏览器的默认样式，所以在没有特别指定 a 标签的颜色和下划线定义的前提下， 会从父级元素 p 继承，因此链接会显示为红色。
特别补充：
inherit在 CSS1 规范中并未定义，所以 IE6, IE7 以及 IE8 的 QuirksMode 不支持。
总结
- 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
- A 表示内联样式，只有 1 或者 0 两个值；
- B 表示规则中 ID 的数量；
- C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；
- D 表示规则中标签和伪元素的数量；
- 比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位；
- 有
!important标记的属性权重值无视没用!important指定的一切情况； - 多次指定
!important时，相互抵销。 inherit而来的属性定义，优先级低于任何直接指定的属性值。
感觉说了好多，其实就两点：
1、浏览器渲染CSS时会计算用哪些选择器的样式，所以通过权值来决定
权值的大小跟选择器的类型和数量有关
2、浏览器在渲染CSS时难免会存在多个样式对同一元素产生影响，这就需要样式优先级来控制
样式的优先级跟样式的定义顺序有关
推荐书籍《页面重构中的模块化设计》；