CSS选择器、层叠和特殊性、继承
CSS通过选择器将样式应用于特定的HTML元素。
选择器种类
-
基本选择器
元素选择器 elementname(元素名称)
类选择器 .classname(类名)
ID 选择器 #idname(ID 名)
通配选择器 * ns|* |
属性选择器 [属性=值]
-
组合选择器
相邻兄弟选择器 A + B
普通兄弟选择器 A ~ B
子选择器 A > B
后代选择器 A B
-
伪类
-
伪元素
优先级规则
无论是层叠应用的规则还是浏览器为选择器分配的数值（特殊值）来决定最相关，都遵循当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖该元素从祖先元素继承而来的规则。
1. 层叠
层叠在寻找的同一元素具有两个或更多规则时，通过分配一个重要度，来处理冲突。作者和用户都可以设置自己的样式，浏览器也有默认的样式表，通常来说浏览器自带的默认样式重要度最低。将任何规则指定为!important能够让其优于任何规则，甚至高于作者的规则。
重要度次序，下面的次序是递减的
标有!important的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器默认样式
2. 特殊性（优先级）
为了计算规则的特殊性，给每一种选择器都会分配一个数字值。然后相加后计算出规则的特殊性。
特殊性的计算不是以数字10为基数，而是采用一个更高的未指定的技术。这能使更特殊的选择器（例如：ID选择器）不会被大量特殊性低的一般选择器（例如：类型选择器）所超越。为了简化，在一个特定选择器中的选择器数量少于10个，则以10为基数计算特殊性。
特殊性分为四个等级：a、b、c、d
内联样式 (例如, style="font-weight:bold") ，a=1
b=ID选择器的总数
c=属性选择器、类和伪类的总数
d=类型选择器和伪元素的总数
特殊性=a，b，c，d；数值为abcd
例如style=”“；特殊性：1，0，0，0；数值：1000；
/#wrapper /#content；特殊性：0，2，0，0；数值：200；
按照常用的CSS编写方式，我们不会为同一种添加过多的选择器。故为了简化记忆，我们忽略特殊性的计算值，直接将选择器按优先级的顺序记忆。
下面选择器类型的优先级是递增的：
类型选择器和 伪元素
类选择器 ，属性选择器，伪类
ID选择器
通配选择符(*), 关系选择符(+, >, ~, ’‘) 和 否定伪类(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。
给元素添加的内联样式总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。
使用!important规则时会覆盖其他规则，这破坏了样式表中的固有的级联规则，故我们应该尽量避免使用!important，尝试利用更具体的CSS规则来取代它。
继承
简单来说，继承就是应用样式的后代会继承样式的某些属性，比如颜色和字号。
每个CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
当元素的继承属性没有指定值时，则取父属性的同属性计算值，越亲代间的计算值越大。非继承属性没有指定值时，则取属性的初始值。
老版本的IE浏览器在继承表格中的字号方面会有问题，所以必须指定表格继承字号或单独设置字号。
继承这一属性一定程度上能够减少代码的编写，但是也会使得样式来源判断变得困难，现代的调试功能基本上都能简单的找到来源。
参考：MDN：优先级
