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