03-css的继承性和层叠性
一、继承性
css中所谓的继承，就是子集继承父级的属性。
可以继承的属性：color、font-xxx、text-xxx、line-xxx。（主要是文本级的标签元素）
但是，像一些盒子元素属性，定位的元素（浮动、绝对定位、固定定位）不能继承。
二、层叠性
层叠性：权重大的标签覆盖了权重小的标签。
权重：谁的权重大，浏览器就显示谁的属性
那到底权重怎么判断呢？
首先，看标签有没有被选中，如果都被选中了，比较权重（通过id class 标签的数量），谁的权重大就显示谁的属性；权重一样大，后来者居上。
其次，没有选中的标签权重为0，没法跟选中的标签相比。
如果标签都没有被选中，谁离得近就显示谁的属性，如果一样近，再比权重。
都被选中比权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
<style>
#box1 #box2 p{
color: red;
}
#box1 .wrap2 p{
color: yellow;
}
div div #box3 p{
color: green;
}
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 class 标签 的数量，遵循id>class>标签
都被选中，权重相同
后来者居上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
<style>
#box1 .wrap3 p{
color: red;
}
#box1 .wrap2 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>
选中的标签永远比没选中的标签权重大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
<style>
#box1 #box2 .wrap3{
color: red;
}
#box1 .wrap2 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>
都是继承来的属性
采用就近原则，谁离预选中标签近，就显示谁的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
<style>
#box1 #box2 .wrap3{
color: red;
}
#box1 .wrap2{
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>
都是继承来的属性，一样近，再比权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
<style>
#box1 #box2 .wrap3{
color: red;
}
#box1 .wrap2 .wrap3{
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>
!important设置权重为无限大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
<style>
#box1 #box2 .wrap3{
color: red;
}
#box1 .wrap2 .wrap3{
color: yellow !important;
}
</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>
作者：流浪者
日期：2019-08-31
03-css的继承性和层叠性的更多相关文章
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端----css的继承性和层叠性
css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color , font ...
- 04.CSS的继承性和层叠性
CSS有两大特性: 继承性和层叠性 继承性 面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点: 继承了父类的属性和方法. 那么 css 就是在设置属性的 , 不会牵扯到方法 ...
- CSS的继承性和层叠性
1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...
- CSS样式----CSS的继承性和层叠性（图文详解）
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
- 【WEB前端】CSS继承性和层叠性（极度重要）
1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...
- css 两大特性:继承性和层叠性
css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...
- css 继承性和层叠性
css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...
- CSS(4)---三大特性(继承性，层叠性，优先级)
CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
随机推荐
- Markdown实用技巧整理
标题 段落 列表 引用 代码块 链接 图片 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.段落 1.换行: 2.加粗: 3.分割线: 4.删除线: deprecated 5 ...
- 业务代码的救星——Java 对象转换框架 MapStruct 妙用
简介 在业务项目的开发中,我们经常需要将 Java 对象进行转换,比如从将外部微服务得到的对象转换为本域的业务对象 domain object,将 domain object 转为数据持久层的 dat ...
- POJ 3067 Japan (树状数组求逆序对）
POJ - 3067 题意:有(1-n)个城市自上到下在左边, 另有(1-m)个城市自上到下在右边,共有m条高速公路,现求这m条直线的交点个数,交点不包括在城市处相交. 题解:先将高速公路读入,然后按 ...
- poj 1177 Picture（线段树周长并）
题目链接:http://poj.org/problem?id=1177 题意:给你n个矩形问你重叠后外边缘总共多长. 周长并与面积并很像只不过是处理的时候是 增加的周长=abs(上一次的线段的长度 ...
- CodeForces 760 C. Pavel and barbecue（dfs+思维）
题目链接:http://codeforces.com/contest/760/problem/C 题意:一共有N个烤炉,有N个烤串,一开始正面朝上放在N个位子上.一秒之后,在位子i的串串会移动到pi位 ...
- 【JavaScript】ESlint & Prettier & Flow组合，得此三神助，混沌归太清
Flow Flow的意义 Flow是faceBook开源的一个JavaScript静态类型检查工具,作用类似TypeScript,但是它不像TS那样是一门独立的语言,而是作为一个babel-plugi ...
- JAVA - 一个for循环实现99乘法表
public class Test03 {public static void main(String[] args) { int lie = 1; for (int hang = 1; hang&l ...
- 【LeetCode】435-无重叠区间
题目描述 给定一个区间的集合,找到需要移除区间的最小数量,使剩余区间互不重叠. 注意: 可以认为区间的终点总是大于它的起点. 区间 [1,2] 和 [2,3] 的边界相互"接触", ...
- LeetCode go
用Go语言刷LeetCode记录,只是为了练习Go语言,能力有限不保证都是最优解,只能在此抛转引玉了. 数据结构和算法 数据结构和算法是程序员的命根子,没了命根子也就没有了尊严. 1. 两数之和 题目 ...
- idea中applicationContext-trans.xml中的Cannot resolve bean 'dataSource'...的问题解决
问题如下: (applicationContext-trans.xml中的部分截图) 先了解问题是怎么出现的: 此处的dataSource是在applicationContext-dao.xml中配置 ...