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
随机推荐
- oepnstack笔记
openstack简介: 组件:Nova 提供计算资源池neutron 网络资源管理horizon 基于openstack API借口使用django开发的web管理 组件:Nova 提供计算资源池n ...
- iptables（一）iptables概念
为什么想写这个系列呢?openstack中的安全组.防火墙都是用iptables实现,后面的规则我们如果想要完全理解,不懂iptables的话,或者不精通iptables的话,会看的比较吃力.所以下定 ...
- ios上传图片遇见了一个TimeoutError(DOM Exception 23)异常
TimeoutError(DOM Exception 23):The operation timed out 百度了下,没发现解决办法
- CSS: Flexbox
Use flexbox to create a responsive website, containing a flexible navigation bar and flexible conten ...
- 在ubuntu14.4里编译UBOOT出错
出错信息如下: OBJCOPY examples/standalone/hello_world.bin LDS u-boot.lds LD u-boot./scripts/dtc ...
- 机器视觉：Convolutional Neural Networks, Receptive Field and Feature Maps
CNN 大概是目前 CV 界最火爆的一款模型了,堪比当年的 SVM.从 2012 年到现在,CNN 已经广泛应用于CV的各个领域,从最初的 classification,到现在的semantic se ...
- Ubuntu中修改Terminal背景
哈哈哈哈,没什么卵用,只能是看起来舒服,有逼格! 详解参考
- ASP.NET 线程详解
本文是博主翻译文章,估计会省略一些,但是我尽量能翻译好,各个知识点通俗易懂.译文如下: ASP.NET Thread Usage on IIS 7.5, IIS 7.0, and IIS 6.0 我简 ...
- Mac 及 Xcode快捷键
mac快捷键: 窗口最大化:control+command+F 窗口最小化:command+M 关闭当前: command+W 退出程序: command+Q Safari往下翻页:空格 ...
- (转)移动端开发总结（一）视口viewport总结
转载链接:移动端开发中,关于适配问题的一点总结(一) 视口 布局视口layout viewport 视觉视口visual viewport 理想视口 缩放 一个重大区别 最小缩放 和最大缩放 分辨率 ...