CSS3——继承、叠加、优先级

介绍

　　介绍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。它的作用赋予最大优先级