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
随机推荐
- Node.js/Python爬取网上漫画
某个周日晚上偶然发现了<火星异种>这部漫画,便在网上在线看了起来.在看的过程中图片加载很慢,而且有时候还不小心点到广告,大大延缓了我看的进度.后来想到能不能把先把漫画全部抓取到本地再去看. ...
- DataV纪录
DataV 是阿里云出品的拖拽式可视化工具,专精于业务数据与地理信息融合的大数据可视化.
- 利用selenium webdriver点击alert提示框
在进行元素定位时常常遇到这样的alert框: 那么该如何定位并点击确定或取消按钮呢?stackoverflow上找到了这个问题的答案. OK, Show you the code: driver.fi ...
- 微信小程序如何在使用wx.request使用cookie
我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...
- 深入理解java虚拟机-第三章
1.概述 2.对象已死吗? 引用计数器 给对象添加一个引用计数器,每当有引用时,计数器加1,引用失效时,计数器减1:任何时刻计数器为0的对象就是不可能再被使用的. 若对象是循环引用,则无法处理.JVM ...
- K-means聚类分析MATLAB代码
function kmeans load q1x.dat; a1=round(98*rand+1); a2=round(98*rand+1); miao1=[q1x(a1,1),q1x(a1,2)]; ...
- Adobe Fireworks CS6是一款集网页图片设计、制作与编辑为一体的专业软件
Adobe Fireworks CS6是一款集网页图片设计.制作与编辑为一体的专业软件,它不仅可以轻松制作出各种动感的Gif.动态按钮.动态翻转等网络图片,还可以轻松实现大图切割,让网页加载的图片显示 ...
- Socket通信简单实例(WCF调用Socket)
服务端: 控制台程序监听 /// <summary> /// Server /// </summary> class Program { static Socket serve ...
- jqprint网页打印时有页码和URL
环境360浏览器或IE,解决方法在浏览器->文件->打印,把页码页脚勾选去掉. IE浏览器,打印->页码设置,把页眉页脚都置成空.
- 第21篇 ubuntu安装ftp服务器（转载）
ubuntu安装ftp服务器 1: 安装vsftpd ~$ sudo apt-get install vsftpd ubuntu10.10自己装了,这步省略. 2: 配置vsftpd 2.1 修改vs ...