• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 3小时前 2次浏览

介绍

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

 


程序员灯塔
转载请注明原文链接:CSS3——继承、叠加、优先级
喜欢 (0)