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

时间:2021-02-01 19:29:46

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)。