CSS继承性和层叠性
CSS 有两大特性:继承性和层叠性
继承性
面向对象语言都会存在继承的概念。在面向对象语言中,继承的特点:继承父类的属性和方法。
继承:给父设置一些属性,子级继承了父级的该属性,这就是css中的继承
有一些属性是可以继承下来:color,font-*,text-*,line-*. 主要是文本级的标签元素
但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承
层叠性
层叠性:权重大的标签覆盖权重小的标签
权重:谁的权重大,浏览器就会显示谁的属性,当权重一样的时候,就以后来设置的属性为准
谁的权重大? 非常简单就是计算数量
计算:id 的数量,class的数量,标签的数量,顺序不能乱
<style type="text/css">
/*1 0 0 */显示红色
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
</style>
还有一个"就近原则",当CSS设置的属性值是通过继承设置的,那么继承来的属性,它的权重为0。权重都为0的话,谁描述的近,就显示谁的属性。所谓描述的近,就是选中到最内层的距离越近
<style type="text/css">
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
</style>
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色?</p>
</div>
</div>
</div>
总结:
- 先看标签元素有没有被选中,如果选中了,就计算数量(id,class,标签的数量),谁的权重大,就显示谁的属性,权重一样大,后来者居上
- 如果没有选中标签元素,权重为0,如果属性是被继承下来的,权重都是0。权重都是0:"就近原则",谁描述的近,就显示谁的属性
!important 的使用
!important:设置权重为无限大
!important 不影响继承来的权重,只影响选中的元素,不要随便使用!important,因为使用它会影响页面的布局