前端-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
随机推荐
- asp.net && javascript MD5加密
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...
- 使用 C# 编写简易 ASP.NET Web 服务器 ---- 模拟IIS的处理过程
如果你想获得更好的阅读体验,可以前往我在 github 上的博客进行阅读,http://lcomplete.github.io/blog/2013/07/16/use-csharp-write-asp ...
- ActiveMQ生产者和消费者优化策略
一.生产者优化策略 默认情况下,ActiveMQ服务端认为生产者端发送的是PERSISTENT Message.所以如果要发送NON_PERSISTENT Message,那么生产者端就要明确指定. ...
- Package rdkafka was not found in the pkg-config search path.
问题 在使用confluent-kafka-go 时遇到如下问题: $ go build t.go # pkg-config --cflags rdkafka Package rdkafka was ...
- idea引入svn
刚想在idea看一个svn的项目代码,结果发现导入项目后,idea在右下角弹出了Event Log窗口,里面的红色小字 Can't use Subversion command line client ...
- 【Spring学习笔记-MVC-9】SpringMVC数据格式化之日期转换@DateTimeFormat
作者:ssslinppp 1. 摘要 本文主要讲解Spring mvc数据格式化的具体步骤: 并讲解前台日期格式如何转换为java对象: 在之前的文章<[Spring学习笔记-MVC ...
- cookie和session得区别
1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...
- bzoj3503 和谐矩阵
Description 我们称一个由0和1组成的矩阵是和谐的,当且仅当每个元素都有偶数个相邻的1.一个元素相邻的元素包括它本身,及他上下左右的4个元素(如果存在).给定矩阵的行数和列数,请计算并输出一 ...
- Logstash之一：入门介绍
简介 Logstash是一个接收,处理,转发日志的工具.支持系统日志,webserver日志,错误日志,应用日志,总之包括所有可以抛出来的日志类型.怎么样听起来挺厉害的吧?在一个典型的使用场景下(EL ...
- Amazon behavior question
Amazon onsite behavior question[一亩三分地论坛面经版] - Powered by Discuz! http://www.1point3acres.com/bbs/thr ...