样式表继承性、层叠性和优先级的浅析

1.继承性：

   CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素 ，是可以被子孙元素所继承的。

   <p>

         p的内容

         <span>span的内容</span>

   </p>

   当设置p{ color: red; }时，发现span的内容也变红了.

   但是也有不一样的例外：如设置p { border: 1px solod red: } 发现span的内容并没有边框样式出现

   那么css中那些属性是可以继承的呢?

   azimuth, border-collapse, border-spacing,
   caption-side, color, cursor, direction, elevation,
   empty-cells, font-family, font-size, font-style,
   font-variant, font-weight, font, letter-spacing,
   line-height, list-style-image, list-style-position,
   list-style-type, list-style, orphans, pitch-range,
   pitch, quotes, richness, speak-header, speaknumeral,
   speak-punctuation, speak, speechrate,
   stress, text-align, text-indent, texttransform,
   visibility, voice-family, volume, whitespace,
   widows, word-spacing

 

2.层叠性

   为同一个元素定义多个样式规则，多个样式规则同时存在时不冲突，多个样式规则会合并成一个，属性重复时以最后一个出现为准   

   如body中有一个p元素: <p> p的内容 </p>

   html引入了1.css和2.css

   1.css中设置p｛ color：red ；font－size：14px； ｝

   2.css中设置p｛ border：1px；margin－top：；20px  ｝

   此时就相当于层叠为p｛ color：red ；font－size：14px；border：1px；margin－top：；20px ｝

   如果1.css和2.css都设置了padding时，以哪个css文件引入顺序在下面的为准，即假设先引入的1.css，后引入的2.css，那么同时出现设置p的padding属性时，以2.css中设置的为准。

3.优先级

   各级样式表冲突时（行内、内部、外部），会按照不同的优先级来应用样式
       0 ：浏览器缺省设置
       1 : 内部样式表 或 外部样式表
 冲突时 ：就近原则，谁在下，以谁为主

       2 ：行内样式（内联样式）

   优先级可以以样式表权重来实现，

        1：内联样式，如: style=””，权值为1000。

      2：ID选择器，如：#content，权值为100。

      3：类，伪类和属性选择器，如.content，权值为10。

      4：类型选择器和伪元素选择器，如div p，权值为1。

  例如#slh p.logo{ ... } --权重值为:100+1+10=111;当出现样式冲突时，以权重值高的为准。

4.!important 规则

  通过！important 显示调整样式规则的优先级
  放在属性值之后， 用 空格 来区分
  由!important标识的属性值，优先级最高 

  注意点：ie6不完全支持!important

   IE支持重定义中的!important，例如：

  .yuanxin {color:#e00!important;}

  .yuanxin {color:#000;}

  你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。

  但不支持同一定义中的!important。例如：

  .yuanxin {color:#e00!important;color:#000;}

  此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。