介绍

  介绍CSS3的高级特性:继承、叠加、优先级

 

分类

  继承

    子标签会继承父标签的某些样式 如:文本的字体和色号

    但是,如:边框属性、边距属性、背景属性、定位属性。这些不被继承。

 

  叠加

    同一个标签元素可以设计多个CSS样式,而HTML标签在页面上最终显示效果是多种CSS样式叠加结果



<div class="myclass" id="mydiv" > HTML5开发 </div>

.myclass { font-size : 12px; }
#mydiv {color : red; }

/*
CSS叠加性
最终div中字体大小12px,字体色号红色。
*/


 

  优先级

    当页面样式叠加时,页面将应用权重最高的样式

CSS样式4个等级权重

选择器

权重

标签选择器

0001

类选择器

0010

id选择器

0100

style内联样式

1000

 

 

 

 

 

 

 

 



/* 权重 0001 + 0001 = 0002 */
p span {.....}

/* 权重 0001 + 0010 = 0011 */
p .blue {.....}

/* 权重 0010 + 0001 = 0011 */
.blue div {......}

/* 权重 0001 + 0010 + 0010 */
p.parent .child {......}


 

优先级的特殊情况

  1. 继承的权重为0

  2. 权重相同时候,CSS遵循就近原则

  3. CSS定义了一个!important。它的作用赋予最大优先级