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的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
随机推荐
- 如何使用linux+xvfb+python+rfs+firefox+jenkins实现UI自动化
首先说一下背景,在项目中使用windows执行机进行rfs脚本运行时,遇到两个问题: 1.Jenkins的多个slave节点和master的连接通过windows插件去建立,如果出现slave断连,无 ...
- 接口自动化 基于python+Testlink+Jenkins实现的接口自动化测试框架
链接:http://blog.sina.com.cn/s/blog_13cc013b50102w94u.html
- xyplorer设置备忘
xyplorer设置备忘https://www.cnblogs.com/liuzhaoyzz/p/9911665.html1.双击向上一级工具→配置→菜单,鼠标,安全性→鼠标→双击空白空间时向上一级. ...
- 项目中使用package-lock.json锁版本问题
package-lock.json的作用: 锁版本,确保项目在后续拉去中,安装依赖包时依赖包的版本始终是统一的 在npm install时会自动生成package-lock.json package. ...
- 继承LinearLayout自定义左侧菜单
public class LeftMenuView extends LinearLayout { LinkedHashMap<Integer,String> map=new LinkedH ...
- 使用原生JDBC循环读取文件并持久化到数据库
先上代码: package com.demo.common.service; import java.io.File; import java.io.FileInputStream; import j ...
- ocr_vote disk损坏恢复
1. 检查votedisk和 ocr备份[root@rh6rac1 bin]./ocrconfig -showbackuprh6rac1 2019/03/19 16:57:40 /or ...
- 关于微信内置浏览器在ios上播放提示音的经验分享
document.addEventListener("WeixinJSBridgeReady", function () { window.audio= new Audio() w ...
- python爬虫爬取京东、淘宝、苏宁上华为P20购买评论
爬虫爬取京东.淘宝.苏宁上华为P20购买评论 1.使用软件 Anaconda3 2.代码截图 三个网站代码大同小异,因此只展示一个 3.结果(部分) 京东 淘宝 苏宁 4.分析 这三个网站上的评论数据 ...
- Android开发 静态static类与static方法持有Context是否导致内存泄露的疑问
简述 在Android开发的过程中,难免会使用单例模式或者静态方法工具类.我们会让它们持有一些外部的Context或者View一般有以下几种情况: 单例模式,类的全局变量持有Context 或 Vie ...