上例中的 span 会继承父元素 div 的样式。但不是所有的属性都会默认使用继承的方式，比如 margin 和 padding 属性。例如：
复制代码
<div style=”margin:10px;padding:10px”>
<p>my color</p>
</div>
此时，元素 p 并不会继承父元素 div 的 margin 和 padding 样式，除非你这么做：
复制代码
<div style=”margin:10px;padding:10px”>
<p style=”margin:inherit;padding:inherit”>my color</p>
</div>
总结
1.首先找到所有作用在元素上的样式。（不要忽略来自继承的样式）
2.计算样式的作用距离，距离越近，优先级越大。
3.使用特殊的计算方法来判断同距离内的样式。
4.如果计算后的结果相同，那么后声明的样式覆盖先前声明的样式。
5.如果某个样式中设置 !important，则无论它的优先级如何，都以该样式为准。（除非迫不得已，强烈不建议使用这个方法，因为这无疑是不符合 css 思想的用法）
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
•浏览器缺省设置
•外部样式表
•内部样式表（位于 <head> 标签内部）
•内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级，在前面文章中我们讲过CSS有很多选择器，那么对于同种样式的CSS，各个选择器的优先级又是如何呢？
我们将某一个CSS看成一个三位数，通过比较数字的大小来获取优先级的高低，那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。
•百位数是该选择器上的id的数量的总和；
•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)；
•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的那个起作用。
•标有"!important"的规则具有最高优先级，例如H1{color:black !importan; font-family:sans-serif}，前景色被标为important，这个前景色具有很高的优先级。但是这种声明容易引起混乱，因此通常使用得较少。
