前端----css的继承性和层叠性

css有两大特性; 继承性和层叠性

继承性

继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承,

需要注意的是有一些属性是可以继承下来的: color , font-* , text-* ,line-* . 主要是文本级的标签元素

　　　　像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位) 不能继承

层叠性

层叠性:权重的标签覆盖掉了权重小的标签,说白了,就是被干掉了

权重:谁的权重大,就显示谁的属性

如何看待权重呢?

　　就是数数选择器个数: id class 标签

先比较id的数量, 如果id数量不一样取数量大的那个属性,后面的 class和标签的数量就可以不用比了

层叠性权重相同怎么处理呢?

第一种现象:当权重相同时,以后来设置的属性为准,前提一定要权重相同

#box2 .wrap3 p{
    color: yellow;
}
        
#box1 .wrap2 p{
    color: red;
}

例子

此时显示的是红色的

第二种现象: 第一个选择器没有选中内层标签,那么它是通过继承来设置的属性,那么它的权重为0. 第二个选择器选中了内层

标签,有权重.

所以,继承来的元素权重为0 .跟选中的元素没有可比性

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}

例子

此时显示的是绿色的

第三种现象: 如果都是继承来的属性,谁描述的近,显示谁的属性.'就近原则'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

View Code

!important 的使用。

！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

总结:

　　1,先看标签元素有没有被选中,如果选中了,就数数(id,class,标签的数量) 谁的权重大就显示谁的属性,

　　　　权重一样大的,后来者居上

　　2,如果没有被选中标签元素,权重为0

　　　　如果属性都是被继承下来的,权重都是0, 权重都是0:"就近原则" :谁描述的近 ,就显示谁的属性

1,谁的权重大,就会显示谁的属性
2,如果权重一样大,就会覆盖
3,如果是继承下来的属性, 权重为0,跟选中的标签没有可比性
4,如果权重为0,name谁描述的近,就显示谁的属性
5,如果权重为0,描述的一样近,回顾原始状态,(数权重)

View Code