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

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

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

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

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

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

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

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

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

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

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

CSS特性: 继承 和 层叠的更多相关文章

  1. CSS系列:CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  2. css的继承和层叠

    标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...

  3. CSS 选择器继承和层叠

    CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...

  4. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  5. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  6. HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  7. css的继承、层叠和特殊性

    1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...

  8. CSS学习笔记之CSS的继承、层叠和特殊性

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  9. 从零开始学习html(九)CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  10. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

随机推荐

  1. 【转】mysql安装图解

    转载地址:http://www.jb51.net/article/23876.htm 很多朋友刚开始接触mysql数据库服务器,下面是网友整理的一篇mysql的安装教程,步骤明细也有详细的说明.   ...

  2. js 多少天以后的时间

    /** * 多少天以后的时间 * @param date 时间 * @param num 多少天 * @param type 类型 年 月 天(默认天) */ exports.afterDate = ...

  3. 页面缩放对css的影响

    昨天发现一个上线的项目css样式明显不对,但是查看别人的电脑上的页面样式都是没问题的,于是找了半天原因,原来是我的浏览器对这个页面缩放了,导致样式问题. 发现了页面缩放会作用在同一个域名下的所有页面, ...

  4. (3) 深入理解Java Class文件格式(二)

    好文转载:http://blog.csdn.net/zhangjg_blog/article/details/21487287 在上一篇文章 深入理解Java Class文件格式(一) 中, 介绍了c ...

  5. Android动画View Animation

    Animations 一.Animations介绍 Animations是一个实现android UI界面动画效果的API,Animations提供了一系列的动画效果,可以进行旋转.缩放.淡入淡出等, ...

  6. Jeff Dean

    "--出自"关于 Jeff Dean 的事实" 其实,"关于 Jeff Dean 的事实"这个G+ 帖中描述的并非是真实的.不过有人大费周折为他建立了 ...

  7. 【leetcode❤python】 160. Intersection of Two Linked Lists

    #-*- coding: UTF-8 -*- #两种方法#方法1:#计算出A和B两个链表的长度分别为m.n;#长度长的链表先走m-n步,之后再一次遍历寻找#方法2:#先走到一个链表的尾部,从尾部开始走 ...

  8. HR数据抽取:通过 Read Master Data 转换规则读取时间相关主属性数据

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. Less入门到上手——前端开发利器<二>深入了解

    接着昨天的继续... ... 4.嵌套: HTML部分 <table> <tr> <th colspan="3">测试列表标题</th&g ...

  10. c#中对rgb的使用

    今天发现c#中没有和vb类似的函数RGB(), 后来发现可以通过Color类来实现 从R,G,B的值可以得到一个Color,如: Color c = Color.FromArgb(255,0,0); ...