CSS特性: 继承 和 层叠
在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承。具体来了解一下。
HTML元素之间存在一个”树型“关系,这个关系使得样式发生继承。
1. 子元素会继承父元素的样式
2. 子元素可以定义自有样式
3. 子元素可以改变从父元素继承而来的样式
4. 子元素的样式不会反作用于父元素(继承是单向的)
5. 每个元素都遵循样式继承的概念。
6. 样式继承是一个抽象(抽象是提取共同点的方法)的过程,抽象程度越高,其适用范围就越光,复用性就月高。
CSS样式之间既存在继承关系,还存在层叠关系,何谓层叠:白色跟黑色层叠,变成灰色;要了解层的概念,就好比玻璃,有红色的,有透明的,有白色,有绿色。将它们堆叠在一起,不同的组合在视觉上产生的效果是不同的。也可理解为冲突的解决方案
要弄清楚样式层叠时的冲突解决方案,就要了解,解决的原则:元素使用不同的选择器所设置的样式的优先级是不同的。在同一对象中,当样式冲突时,根据优先级高的样式进行显示,其优先级的关系为:
1. 单个样式:行内 > ID >类别 > 元素 2. 多个类 :前面 > 后面
继承和层叠是客观的存在的,必然存在继承和层叠,可以通过添加控制局部元素的代码实现继承,层叠样式的额改变。层叠和继承都有很大的优点,但是有时也会给开发造成麻烦,只有深入领悟其真谛,才能使用继承和层叠有的放矢。
CSS特性: 继承 和 层叠的更多相关文章
- CSS系列:CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- css的继承和层叠
标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...
- CSS 选择器继承和层叠
CSS选择器及其继承特性.层叠特性1.基本选择器 标记 id class 这个就不再作介绍了 2.复合选择器 交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...
- css选择器---继承,优先级,层叠
CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性
标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...
- css的继承、层叠和特殊性
1,继承 css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...
- CSS学习笔记之CSS的继承、层叠和特殊性
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...
- 从零开始学习html(九)CSS的继承、层叠和特殊性
一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
随机推荐
- 公历和农历转换JS代码
<!-- function CalConv(M) { FIRSTYEAR = 1936; LASTYEAR = 2031; LunarCal = [ new tagLunarCal(23, 3, ...
- logstash安装与基础用法
若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...
- mysql 一些基础的语法和命令
语法: SELECT 属性列表 FROM 表名或视图名 [ WHERE 条件表达式1 ] [ GROUP BY 属性名1 [ HAVING 条件表达式2 ] [ W ...
- 关于JS的数据类型的一些见解
关于js里的数据类型这块,说下个人对它的一些见地 js中的数据类型可以归类两类, 简单数据类型:string,number,boolean,null,undefined 复杂数据类型:object 其 ...
- REST 架构风格
目前基于网络应用的架构风格主要有三种: RPC架构风格 将服务器看作是由一些过程组成,客户端调用这些过程来执行特定的任务.SOAP就是RPC风格的一种架构.过程是动词性的(做某件事),因此RPC建 ...
- 解决sublime text3中的输入法不根随光标问题
日本的一位大神开发了一款插件用在Sublime Text上,以缓解输入法不跟随光标移动的问题.当然这个问题并没有完美的解决,据一些用户的反映,输入过程中还是偶尔会发生输入法不跟随光标移动的问题,不过确 ...
- 程序设计入门——C语言 第4周编程练习 2 念整数(5分)
题目内容: 你的程序要读入一个整数,范围是[-100000,100000].然后,用汉语拼音将这个整数的每一位输出出来. 如输入1234,则输出: yi er san si 注意,每个字的拼音之间有一 ...
- 用spring的InitializingBean作初始化
org.springframework.beans.factory包下有一个接口是InitializingBean 只有一个方法: /** * Invoked by a BeanFactory af ...
- windows目录选择 文件选择 文件保存对话框
打开文件对话框 const char pszFilter[] = _T("EXE File (*.txt)|*.txt|All Files (*.*)|*.*||"); CFile ...
- 【bzoj1084】最大子矩阵
题意 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. \(1≤n≤100,1≤m≤2,1≤k≤10\) 分析 由于\(m\)只有两 ...