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的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
随机推荐
- 通过Nginx使全站页面变灰
摘要:某大神的博客说“在Nginx负载均衡服务器上,利用sub_filter指令在输出的HTML中增加一行:<style type="text/css">html {f ...
- verilog 中task用法
1．任务定义 任务定义的形式如下: task task_id; [declaration] procedural_statement endtask 其中,关键词 task ...
- 使用命令行执行jmeter的方法
1. 简介 使用非 GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资 本文介绍windows下以命令行模式运行的方法. 1.1. 命令介绍 jmeter -n -t & ...
- 20175227张雪莹 2018-2019-2 《Java程序设计》第九周学习总结
20175227张雪莹 2018-2019-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十一章 JDBC数据库操作 MySQL数据库管理系统 下载安装MySQL 若下载的是 ...
- python 开发接口（一）
一.首先导入模块 pip install flask 二 1 import flas 2 import json import flask #1.启动一个服务 #2.接收到客户端传过来的数据 #3. ...
- systemverilog.vim
" Vim syntax file " Language: SystemVerilog " Maintainer: Stephen Hobbs <stephenh@ ...
- Ubuntu 16.04.3 LTS 安装 MongoDB
1.安装Ubuntu16.04 运行sudo apt-get install mongodb安装Mongodb 如果没有MongoDB库,则运行sudo apt-get update更新库. 2.运行 ...
- mysql创建表及插入数据操作步骤及注意要点
环境:mysql workbench 1.创建新的表,注意,指定要存放的数据库 列名可以加单引号(键盘上1左边的引号),也可以不加 2.插入数据 注意:如果数据是字符型,必须使用单引号或者双引号,如: ...
- node_api学习之http
node模块学习-http 理解 HTTP构建于TCP之上,属于应用层协议,继承自tcp服务器(net模块),它能与多个客户端保持连接,由于基于事件驱动,并不为每个连接创建额外的进程或线程,所以能实现 ...
- Java异常处理——受控（checked）的异常（throws语句）
受控与不受控的异常 1.throws语句中声明的异常称为受控(checked)的异常,通常直接派生自Exception类. 2.RuntimeException(其基类为Exception) 和Err ...