前端-CSS-5-继承性&层叠性&权重比较
1、继承性
<style type="text/css">
.father{
font-size: 30px;
background-color: green;
}
.child{
color: purple;
}
</style>
</head>
<body>
<!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素
像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
-->
<div class="father" id="egon">
<div class="child">
<p>alex</p>
</div>
</div>
<p>小马哥</p>
</body>
2、层叠性
总结：
1.先看标签元素（实际显示的内容）有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
<style type="text/css">
/*<!-- */
/*层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了*/
/*权重： 谁的权重大，浏览器就会显示谁的属性*/
/**/
/*谁的权重大？ 非常简单 数数*/
/**/
/*id的数量 class的数量 标签的数量*/
/*-->*/
#box{
color: red;
}
.container{
color: yellow;
}
p{
color: #2aabd2;
}
</style>
-------------------------------------------------------------------------
/*id的数量 class的数量 标签的数量*/
3、！important
<!-- ！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素 -->
不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的。
<style type="text/css">
p{
color: red !important;
font-size: 30px;
}
.spe1{
color: yellow ;
font-size: 40px;
}
.spe2{
color: green;
font-size: 40px;
} ul{
color: red;
}
.list{
color: purple !important;
}
</style>
选择器的优先级
前端-CSS-5-继承性&层叠性&权重比较的更多相关文章
- 前端----css的继承性和层叠性
css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color , font ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS继承性+层叠性+盒子+浮动
CSS继承性+层叠性+盒子+浮动 CSS继承性 <style> div{ color: pink; font-siz ...
- python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809
---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...
- css中的层叠性及权重的比较
假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...
- CSS---选择器种类 | 层叠性权重
一.css选择器种类 1.1,ID选择器 1.2,类选择器 1.3,标签选择器 1.4,后代选择器 1.5,子代选择器 1.6,交集选择器 1.7,并集选择器 1.8,通配符选择器 1.9,属性选择器 ...
- 前端 CSS的继承性
css有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 记住:有一些属性是可以继承下来 : color . font-*. text- ...
- css 权重值(层叠性)详解
目录 css权重值(重叠性)实例 权重值的计算 !important 提升权重值实例 什么情况下可以使用!important ? 总结: css权重值(重叠性)实例 css中有很多选择器,那在多个选择 ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
随机推荐
- php 使用 file_exists 还是 is_file
Jesns 提出 file_exists 比较老了,建议使用 is_file 来判断文件. 经过我的测试,is_file 果然快很多,以后可以改 is_file 来判断文件. 还有相关链接: is_f ...
- weex 知识点
使用 weex init [project_name] 创建的项目,执行 npm run dev 后,在 public/dist 文件夹里面就生成了两个对应的js,一个是index.web.js, 一 ...
- bzoj 2286(洛谷 2495) [Sdoi2011]消耗战——虚树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2286 https://www.luogu.org/problemnew/show/P2495 ...
- POJ2584 T-Shirt Gumbo——网络最大流模板
题目:http://poj.org/problem?id=2584 像模板一样的简单题.继续使用 & 的当前弧优化和神奇的构造函数. #include<iostream> #inc ...
- 基于ionic框架封装一个图片轮播指令的几点
在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...
- R(1):中文乱码解决方案
读取csv文件出现中文乱码方案,增加编码格式参数 read.csv(trainPath,header=TRUE,stringsAsFactors=TRUE,encoding = "UTF-8 ...
- 【python】字符串函数
1.String模块中的常量: string.digits:数字0~9 string.letters:所有字母(大小写) string.lowercase:所有小写字母 string.printabl ...
- 专访TK教主于旸：原来那些搞安全的说的都是真的（图灵访谈）
引用:http://www.ituring.com.cn/article/196609 于旸,网名“tombkeeper”,在国内黑客界被尊称为“TK教主”,现任腾讯玄武实验室总监.于旸从事信息安全研 ...
- TFS 2012如何切换用户
TFS 2012如何切换用户 编写人:左丘文 2018-3-8 春节假期来后,准备干活的时候,才发现TFS账户登入的是另外一个账户.现在想切换为自己的账户时,发现Vs 2012中没找到可以登出的功能, ...
- Oracle查看及修改Oracle最大连接数
Oracle查看及修改Oracle最大连接数 .查询oracle的最大连接数: select * from v$parameter where name='processes'; .oracle 11 ...