css的继承和层叠
标签（空格分隔）： css
css称为层叠样式表，CSS有两大特性：继承性和层叠性，本章简单介绍一下继承性：
继承性：
定义：继承就是给父及设置了一些属性，子级继承了父及的该属性，这就是我们的css的继承，有一些属性可以继承，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
.father{
color:red;
}
</style>
</head>
<body>
<div class="father" id="egon">
<p>wangwang</p>
</div>
</body>
</html>
问题：背景色是不是继承？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
.father{
color:red;
font-size: 30px;
background-color: green;
}
</style>
</head>
<body>
<div class="father" id="egon">
<p>wangwang</p>
</div>
</body>
</html>
- 通过上述的例子，背景色不属于继承，P标签的标签是透明的，但是从肉眼看到的是绿色的，他是通过透明提现的，所以background是没有继承的；
哪些属性可以继承
color,
font-,
text-,
line-*
像一些盒子元素，定位元素（浮动，绝对，固定定位）不能继承，大家可以先了解一下；
层叠性：
这里先举个例子，大家猜猜如下的代码，P标签是什么颜色？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
#box{
color:red;
}
.container{
color:yellow;
}
</style>
</head>
<body>
<p id="box" class="container">
猜猜我是什么颜色
</p>
</body>
</html>
结果如下图：
问题：为什么显示为红色呢？代码不是从上往下执行的吗？
- 答案：在css里面我们会讨论这个问题，在CSS里面有个权重的概念，谁的权重大，浏览器就会显示谁的属性；
例如：如下代码执行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
#box{
color:red;
}
.container{
color:yellow;
}
p{
color:purple;
}
</style>
</head>
<body>
<p id="box" class="container">
猜猜我是什么颜色
</p>
</body>
</html>
- 执行结果：还是显示红色，为什么呢？
- 那么如何判断谁的权重大？非常简单，就是数数：
1.先数：id的数量；100
2.在数：class数量010
3.标签：数量001
上述的代码：中当仅仅显示id的时候：这时候100我们只看id的时候，对应的ID是1，对应的类是0，对应的标签是0
当显示：类的时候：010，这时候对应的ID是0，对应的类是1，对应的标签是0
当显示：标签的时候：001对应的ID是0，对应的类是0，对应的标签是1；
- 比较的方法：
比较id的数量：如上述所述：id第一位是1，就不再进行后续的比较了；
100----010---001；
如上第一位比较大，就不在进行后续的比较了，如果第一位一样我们比较第二位，如果第二位比较大，我们不在进行比较就是显示第二位大的那个，如果第一位和第二位都一样的话，就继续比较；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
<!--这时候100我们只看id的时候，对应的ID是1，对应的类是0，对应的标签是0-->
#box{
color:red;
}
/*010，这时候对应的ID是0，对应的类是1，对应的标签是0*/
.container{
color:yellow;
}
/*001对应的ID是0，对应的类是0，对应的标签是1*/
p{
color:purple;
}
</style>
</head>
<body>
<p id="box" class="container">
猜猜我是什么颜色
</p>
</body>
</html>
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style type="text/css">
<!-- id 为2个0个类1个标签-->
#box1 #box2{
color:yellow;
}
/*1 1 1*/
#box2 .wrap3{
color:red;
}
/*1 0 3*/
div div #box3 p{
color:purple;
}
/*0 3 4*/
div.wrap1 div.wrap2 div.wrap3 p{
color:blue;
}
</style>
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
我们在比较的时候会先比较id的数量，然后比较类的数量，标签的数量；权重大的就是有限显示权重大的；
权重相同的处理
例如：下边的代码，权重一样的时候，应该怎么显示呢？应该显示后边的最新的权重；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style type="text/css">
/*1 1 1*/
#box1 .wrap2 p{
color:red;
}
/*1 1 1*/
#box2 .wrap3 p{
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
so:所以上述执行的颜色结果是：黄色；
问题：
通过上述的学习大家看看下边的例子的网页应该显示为什么颜色？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style type="text/css">
/*2 1 0 */
#box1 #box2 .wrap3{
color:red;
}
/*1 1 1*/
#box2 .wrap3 p{
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
根据我们以上的学习大家毫无疑问肯定是：红色；
颜色结果如下：
- so:这里总结：我们会先看一下标签有没有被选中，选中了，就是开始数数(id ,class ,标签的数量，)谁的权重大就显示谁的属性，如果没有被选中，权重为0
如果权重都是被继承下来的权重都是0，“就近原则”这里就近原则就是说谁描述的近；
css的继承和层叠的更多相关文章
- CSS系列：CSS的继承与层叠特性
1. 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标签 ...
- CSS 选择器继承和层叠
CSS选择器及其继承特性.层叠特性1.基本选择器 标记 id class 这个就不再作介绍了 2.复合选择器 交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...
- 从零开始学习html（九）CSS的继承、层叠和特殊性
一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- css选择器---继承,优先级,层叠
CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
随机推荐
- 黑电平校正BLC
参考:https://www.cnblogs.com/zhangAlin/p/10661763.html
- CentOS 7 install Tensorflow-gpu
# install TensorFlow GPU on CentOS 7.0# https://www.server-world.info/en/note?os=CentOS_7&p=tens ...
- java.util.concurrent包下并发锁的特点与适用场景
序号 类 备注 核心代码 适用场景 1 synchronized 同步锁 并发锁加在方法级别上,如果是单例class对象,则只能允许一个线程进入public synchronized void doX ...
- 持续更新scrapy的错误，ValueError: Missing scheme in request url:
只需要将 for href in response.xpath('XX').extract(): yield Request(hrefs) 修改为下面,就可以显示出来 for href in resp ...
- AD中批量创建域用户
EXCEL表中的各列说明情况: A列:姓 B列:名 C列:姓名 D列:账号 E列:密码 此表格另存为person .csv 的格式到AD的C盘目录下,用记事本打开如下图所示: 打开CMD,右键以管理员 ...
- Anaconda安装及配置
简介 Anaconda(官方网站)指的是一个开源的Python发行版本,可以便捷获取包且对包能够进行管理,同时对环境可以统一管理的发行版本.Anaconda包含了conda.Python在内的超过18 ...
- 深度学习（二）--深度信念网络（DBN）
深度学习(二)--深度信念网络(Deep Belief Network,DBN) 一.受限玻尔兹曼机(Restricted Boltzmann Machine,RBM) 在介绍深度信念网络之前需要先了 ...
- Hbase的集群安装
hadoop集群的搭建 搭建真正的zookeeper集群 Hbase需要安装在成功部署的Hadoop平台,并且要求Hadoop已经正常启动. 同时,HBase需要集群部署,我们分别把HBase 部署到 ...
- 部署redis4.0-cluster
一.部署环境 .关闭iptables(firewalld)或添加放行规则 .关闭selinux3.部署redis实例,参考:https://www.cnblogs.com/panwenbin-logs ...
- Hexo NexT主题/cnblog等博客增加点击出现红心的特效
查看效果 每日前端 我的博客 实现:1.下载这段js代码到项目目录 ===>下载地址2.在需要的地方添加js代码 <script type="text/javascript&qu ...