前端----css的继承性和层叠性
css有两大特性; 继承性和层叠性
继承性
继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承,
需要注意的是 有一些属性是可以继承下来的: color , font-* , text-* ,line-* . 主要是文本级的标签元素
像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位) 不能继承
层叠性
层叠性:权重的标签覆盖掉了权重小的标签,说白了,就是被干掉了
权重:谁的权重大,就显示谁的属性
如何看待权重呢?
就是数数选择器个数: id class 标签
先比较id的数量, 如果id数量不一样 取数量大的那个属性,后面的 class和标签的数量就可以不用比了
层叠性权重相同怎么处理呢?
第一种现象:当权重相同时,以后来设置的属性为准,前提一定要权重相同
#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,因为使用它会影响页面的布局
总结:
1,先看标签元素有没有被选中,如果选中了,就数数(id,class,标签的数量) 谁的权重大 就显示谁的属性,
权重一样大的,后来者居上
2,如果没有被选中标签元素,权重为0
如果属性都是被继承下来的,权重都是0, 权重都是0:"就近原则" :谁描述的近 ,就显示谁的属性
,谁的权重大,就会显示谁的属性
,如果权重一样大,就会覆盖
,如果是继承下来的属性, 权重为0,跟选中的标签没有可比性
,如果权重为0,name谁描述的近,就显示谁的属性
,如果权重为0,描述的一样近,回顾原始状态,(数权重)
前端----css的继承性和层叠性的更多相关文章
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 04.CSS的继承性和层叠性
CSS有两大特性: 继承性和层叠性 继承性 面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点: 继承了父类的属性和方法. 那么 css 就是在设置属性的 , 不会牵扯到方法 ...
- CSS样式----CSS的继承性和层叠性(图文详解)
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
- CSS的继承性和层叠性
1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
- 【WEB前端】CSS继承性和层叠性(极度重要)
1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...
- css 两大特性:继承性和层叠性
css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...
- css 继承性和层叠性
css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...
- CSS(4)---三大特性(继承性,层叠性,优先级)
CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...
随机推荐
- Java秒杀系统方案优化 高性能高并发实战(1)
首先先把 springboot +thymeleaf 搞起来 ,参考 springboot 官方文档 本次学习 使用 springboot + thymeleaf+mybatis+redis+Rabb ...
- python socket 编程
TCP IPv4 # server.py import socket import threading import time s = socket.socket(socket.AF_INET,soc ...
- [Android] Android v4包CompoundButtonCompatLollipop.class重复问题
用 Butter Knife 8.8.1 导致v4包CompoundButtonCompatLollipop.class重复问题 详细错误如下: Error:Execution failed fo ...
- python模块之自定义模块
模块概述 到此之前,我们都是在一个py文件里操作,接下来,我们学习模块的内容,可以从其他文件引入内容(如函数等) 1. 什么是模块 一个py文件就是一个模块,模块是一些相似功能的集合体 2. 为什么要 ...
- MySQL的随笔
数据库引擎 MySQL5.0支持的存储引擎包括MyISAM,InnoDB.MEMORY.MERGE.BDB等等,其中InnoDB和BDB提供事务安全表,其他存储引擎都是非事务安全表. MyISAM M ...
- SpringBoot系列: 使用MyBatis maven插件自动生成java代码
====================================pom.xml 文件====================================需要在 pom.xml 文件增加 m ...
- Groovy 设计模式 -- Strategy 模式
策略模式 https://en.wikipedia.org/wiki/Strategy_pattern In computer programming, the strategy pattern (a ...
- JavaSE回顾及巩固的自学之路(三)——————所有语言的都存在的基本运算
在上一篇的博客中,我回顾到Java中的关键字,标识符等知识点,而今天这篇博文将回顾Java的,哦,不,不止Java,据本人了解,几乎在所有的语言中的基础阶段,都会存在这些运算,只是语法不一样而已. 今 ...
- luogu P3236 [HNOI2014]画框
传送门 我们把一种方案的\(\sum a_{i,j}\)和\(\sum b_{i,j}\)看成点\((\sum a_{i,j},\sum b_{i,j})\),那么就只要求横纵坐标之积最小的点,类似于 ...
- java.lang.NoSuchMethodError: org.apache.curator.framework.api.CreateBuilder.creatingParentsIfNeeded()Lorg/apache/curator/framework/api/ProtectACLCreateModeStatPathAndBytesable;
1 错误信息 java.lang.NoSuchMethodError: org.apache.curator.framework.api.CreateBuilder.creatingParentsIf ...