04.CSS的继承性和层叠性
CSS有两大特性: 继承性和层叠性
继承性
面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点: 继承了父类的属性和方法. 那么 css 就是在设置属性的 , 不会牵扯到方法的层面.
继承 : 给父级设置一些属性 , 子级继承了父级的该属性 , 这就是我们的css中的继承.
记住 : 有一些属性是可以继承下来 : color ; font-* ; text- ; line- ; 主要是文本级的标签元素.
盒模型的属性是不可以继承下来的
a 标签有特殊情况 , 设置a 标签的字体颜色 一定要选中a , 不要使用继承性
但是像一些盒子元素属性 , 定位的元素 (浮动 , 绝对定位 , 固定定位) 不能继承.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.box p span{ color: red; }*/ .box{ color: red; } .box a{ color: yellow; } .box p{ color: green; font-size: 30px; line-height: 30px; background-color: red; text-align: right; } span{ background-color: transparent; } </style> </head> <body> <div class="box"> 日天 <a href="#">百度</a> <p> wusir <span>alex</span> </p> </div> </body> </html>
层叠性
层叠性 : 权重的标签覆盖掉了权重小的标签 , 说白了 , 就是被干掉了
权重 : 谁的权重大 , 浏览器就会显示谁的属性
数 : id 的数量 class 的数量 标签 的数量 , 顺序不能乱
/*1 0 0 */显示红色 #box{ color: red; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: purple; }
升级版
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id='box1' class="wrap1"> 2 <div id="box2" class="wrap2"> 3 <div id="box3" class="wrap3"> 4 <p>再来猜猜我是什么颜色?</p> 5 </div> 6 </div> 7 </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#box1 #box2 p{
color: yellow;
}
#box2 .wrap3 p{
color: red;
}
div div #box3 p{
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
还是上面那个html结构,如果我设置以下css,会显示什么颜色呢。
1 #box2 .wrap3 p{ 2 color: yellow; 3 } 4 5 #box1 .wrap2 p{ 6 color: red; 7 }
答案是红色 . 结论 : 当权重一样的时候 是以后来设置的属性为准 , 前提必须权重一样 , 后来者居上 .
#box1 #box2 .wrap3{ color: red; } #box2 .wrap3 p{ color: green; }
这个是绿色的 , 第一条css设置的属性值 , 是通过继承性设置成的红色 , 那么继承来的属性, 他的权重为0 , 他没有资格跟我们下面选中的标签对比.
那么同为被继承来的属性则:
#box1 #box2 .wrap3{ color: red; } .wrap1 #box2{ color: green; }
事实证明 : 权重都是0 : 那么就是 " 就近原则" : 谁描述的近 , 就显示谁的属性 , 所谓描述的近 , 就是选中到最内层的距离越近.
层叠权重形同处理
第一种现象 : 当权重相同时 , 以后来设置的属性为准 , 前提一定要权重相同
#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; }
了解:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
!important 的使用。
!important:设置权重为无限大
!important 不影响继承来的权重,只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
总结 :
- 行内 > id > class > 标签 *****
- 数数 数 id class 标签
- 先选中标签 , 权重一样 , 以后设置为主
- 继承来的属性 它的权重为0 , 与选中的标签没有可比性
- 如果都是继承来的属性 , 保证就近原则
- 都是继承来的属性 , 选择的表标签一样近, 再去数权重