首页 > 代码库 > CSS特性: 继承 和 层叠

CSS特性: 继承 和 层叠

在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承。具体来了解一下。

HTML元素之间存在一个”树型“关系,这个关系使得样式发生继承。
1. 子元素会继承父元素的样式

2. 子元素可以定义自有样式

3. 子元素可以改变从父元素继承而来的样式

4. 子元素的样式不会反作用于父元素(继承是单向的)

5. 每个元素都遵循样式继承的概念。

6. 样式继承是一个抽象(抽象是提取共同点的方法)的过程,抽象程度越高,其适用范围就越光,复用性就月高。

 

CSS样式之间既存在继承关系,还存在层叠关系,何谓层叠:白色跟黑色层叠,变成灰色;要了解层的概念,就好比玻璃,有红色的,有透明的,有白色,有绿色。将它们堆叠在一起,不同的组合在视觉上产生的效果是不同的。也可理解为冲突的解决方案

要弄清楚样式层叠时的冲突解决方案,就要了解,解决的原则:元素使用不同的选择器所设置的样式的优先级是不同的。在同一对象中,当样式冲突时,根据优先级高的样式进行显示,其优先级的关系为:

     1. 单个样式:行内  >  ID  >类别 > 元素                      2.     多个类 :前面 >  后面

继承和层叠是客观的存在的,必然存在继承和层叠,可以通过添加控制局部元素的代码实现继承,层叠样式的额改变。层叠和继承都有很大的优点,但是有时也会给开发造成麻烦,只有深入领悟其真谛,才能使用继承和层叠有的放矢。