CSS层叠性，继承性及优先级

• 理解CSS的层叠性与继承性
  （1）层叠性
  所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义< p >标记字号大小为12像素，链入式定义< p >标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
  （2）继承性
  所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。例如，定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在< body >标记中，是< body >标记的子标记。
  并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：
  边框属性
  外边距属性
  内边距属性
  背景属性
  定位属性
  布局属性
  元素宽高属性

• 掌握CSS的优先级
  定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。为了体验CSS优先级，首先来看一个具体的例子，其CSS样式代码如下：

p{color:red;}          /*标记样式*/
.blue{color:green;}    /*class样式*/
#header{color:blue;}   /*id样式*/

对应的HTML结构为：

<p id="header" class="blue">
	帮帮我，我到底显示什么颜色？
</p>

标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100.因此文本显示为蓝色。

在考虑权重时，初学者好需要注意一些特殊的情况，具体如下：
（1）继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0。
例如：

strong{color:red;}
#header{color:green;}

对应的HTML结构为：

<p id="header" class="blue">
	<strong>继承样式不如自己定义</strong>
</p>

虽然#header具有权重100，但被strong继承时权重为0，而strong选择器的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。
（2）行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，同等情况下该命令增大优先级。