继承性
CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。
哪些属性能继承?color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。
层叠性
层叠性:就是CSS处理冲突的能力。 所有的权重计算,没有任何兼容问题!
当选择器,选择上了某个元素的时候,那么要这么统计权重:
id的数量,类的数量,标签的数量
<style type="text/css">
#box1 .box2 p { /*权重:111*/
color: red;
}
div div #box3 p { /*权重:103*/
color: blue;
}
div.box1 div.box2 div.box3 p { /*权重:34*/
color: pink;
}
</style>
255个标签等于1个类名(可以进位,但是没有实战意义)
总结:
如果权重一样,那么以后出现选择器的为准。
如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。
如果大家都是0,那么有一个就近原则:谁描述的近,听谁的。
权重问题
同一个标签,携带了多个类名,有冲突:
<p class="spec1 spec2">我是什么颜色?</p>
<p class="spec2 spec1">我是什么颜色?</p>
和在标签中的挂类名的书序无关,只和css的顺序有关:
spec2{
color:blue;
}
.spec1{
color:red;
}
所以是红色的。
!important标记
<style type="text/css">
p{
color:red !important;
}
</style>
来给一个属性提高权重。这个属性的权重就是无穷大。
!important无法提升继承的权重,该是0还是0
!important不影响就近原则
!important做站的时候,不允许使用。因为会让css写的很乱。