04.CSS的继承性和层叠性
CSS有两大特性: 继承性和层叠性
继承性
面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点: 继承了父类的属性和方法. 那么 css 就是在设置属性的 , 不会牵扯到方法的层面.
继承 : 给父级设置一些属性 , 子级继承了父级的该属性 , 这就是我们的css中的继承.
记住 : 有一些属性是可以继承下来 : color ; font-* ; text- ; line- ; 主要是文本级的标签元素.
盒模型的属性是不可以继承下来的
a 标签有特殊情况 , 设置a 标签的字体颜色 一定要选中a , 不要使用继承性
但是像一些盒子元素属性 , 定位的元素 (浮动 , 绝对定位 , 固定定位) 不能继承.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*.box p span{
color: red;
}*/
.box{
color: red;
}
.box a{
color: yellow;
}
.box p{
color: green;
font-size: 30px;
line-height: 30px;
background-color: red;
text-align: right;
}
span{
background-color: transparent;
}
</style>
</head>
<body> <div class="box">
日天
<a href="#">百度</a>
<p>
wusir
<span>alex</span>
</p>
</div> </body>
</html>
例如:
层叠性
层叠性 : 权重的标签覆盖掉了权重小的标签 , 说白了 , 就是被干掉了
权重 : 谁的权重大 , 浏览器就会显示谁的属性
数 : id 的数量 class 的数量 标签 的数量 , 顺序不能乱
/*1 0 0 */显示红色
#box{ color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
升级版
1 <div id='box1' class="wrap1">
2 <div id="box2" class="wrap2">
3 <div id="box3" class="wrap3">
4 <p>再来猜猜我是什么颜色？</p>
5 </div>
6 </div>
7 </div>
升级版
#box1 #box2 p{
color: yellow;
}
#box2 .wrap3 p{
color: red;
}
div div #box3 p{
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
升级版
还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。
1 #box2 .wrap3 p{
2 color: yellow;
3 }
4
5 #box1 .wrap2 p{
6 color: red;
7 }
答案是红色 . 结论 : 当权重一样的时候 是以后来设置的属性为准 , 前提必须权重一样 , 后来者居上 .
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
这个是绿色的 , 第一条css设置的属性值 , 是通过继承性设置成的红色 , 那么继承来的属性, 他的权重为0 , 他没有资格跟我们下面选中的标签对比.
那么同为被继承来的属性则:
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
事实证明 : 权重都是0 : 那么就是 " 就近原则" : 谁描述的近 , 就显示谁的属性 , 所谓描述的近 , 就是选中到最内层的距离越近.
层叠权重形同处理
第一种现象 : 当权重相同时 , 以后来设置的属性为准 , 前提一定要权重相同
#box2 .wrap3 p{
color: yellow;
}
#box1 .wrap2 p{
color: red;
}
我们会发现此时显示的是红色的.
第二种现象 : 第一个选择器没有选中内层标签, 那么它是通过继承来设置的属性 , 那么它的权重为 0 , 第二个选择器中了内层标签 , 有权重.
所以 继承来的元素 权重为 0 , 跟选中的元素没有可比性 .
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
我们会发现此时显示的是绿色的
第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
了解:
!important 的使用。 ！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
了解
总结 :
- 行内 > id > class > 标签 *****
- 数数 数 id class 标签
- 先选中标签 , 权重一样 , 以后设置为主
- 继承来的属性 它的权重为0 , 与选中的标签没有可比性
- 如果都是继承来的属性 , 保证就近原则
- 都是继承来的属性 , 选择的表标签一样近, 再去数权重
04.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 ...
- 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
随机推荐
- Python 面向对象-------补充
Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...
- [转载]java合并word文件
需求背景 在互联网教育行业,做内容相关的项目经常碰到的一个问题就是如何动态生成一张word试卷.事先把题库中的每一道试题都已经保存成一个独立的word文件了,但是在选择了部分试题生成一张word试卷的 ...
- HTML 中 id与name 区别
一个name可以同时对应多个控件,比如checkbox和radio而id必须是全文档中唯一的 id的用途1) id是HTML元素的Identity,主要是在客户端脚本里用.2) label与form控 ...
- NHibernate的几种查询方式
SQL:普通SQL查询(也就是SQLServer,Oracle,Sybase等数据库的查询语句,建议使用基于TSQL-92) 核心对象:CreateSQLQuery IList list = sess ...
- ROS中使用ABB Yumi IRB14000的一些资料汇总
目前,ABB RobotStudio 已经更新到6.05.01了,可至官网下载. 使用ABB RobotStudio和ROS进行联合调试,请参考下文: http://blog.csdn.net/Zha ...
- 最新海康摄像机、NVR、流媒体服务器、回放取流RTSP地址规则说明
本文档主要介绍海康威视设备预览.回放.流媒体取流的RTSP URL和IE直接预览.回放的HTTP URL. RTSP为取流协议,取到码流后需要解码显示,可以通过VLC播放器进行测试,IE等浏览器网页不 ...
- makefile 学习归纳
makefile 学习归纳 一直希望 好好整理下 makefile的写法,这在linux编程界是必备技能.下面就好好的说道说道. 可以参考的大神总结 整理 makefile是供make命令执行的 脚本 ...
- I.MX6 recovery mode hacking
/******************************************************************************** * I.MX6 recovery m ...
- 数据库需要支持emoji表情
由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...
- 【LIUNX】目录或文件权限，权限授予
三个三个一组看: 1. 第一段表示文件所有者对此文件的操作权限 2. 第二段表示文件所有者所在组对些文件的操作权限 3. 第三段表示除上述两种外的任何用户/组对此文件的操作权限 r读取:4 w写入:2 ...