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的继承性和层叠性的更多相关文章

  1. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. 04.CSS的继承性和层叠性

    CSS有两大特性:  继承性和层叠性 继承性 面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点:  继承了父类的属性和方法.  那么 css  就是在设置属性的 ,  不会牵扯到方法 ...

  3. CSS样式----CSS的继承性和层叠性(图文详解)

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  4. CSS的继承性和层叠性

    1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...

  5. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  6. 【WEB前端】CSS继承性和层叠性(极度重要)

    1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...

  7. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

  8. css 继承性和层叠性

    css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...

  9. CSS(4)---三大特性(继承性,层叠性,优先级)

    CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...

随机推荐

  1. Java秒杀系统方案优化 高性能高并发实战(1)

    首先先把 springboot +thymeleaf 搞起来 ,参考 springboot 官方文档 本次学习 使用 springboot + thymeleaf+mybatis+redis+Rabb ...

  2. python socket 编程

    TCP IPv4 # server.py import socket import threading import time s = socket.socket(socket.AF_INET,soc ...

  3. [Android] Android v4包CompoundButtonCompatLollipop.class重复问题

    用 Butter Knife  8.8.1  导致v4包CompoundButtonCompatLollipop.class重复问题 详细错误如下: Error:Execution failed fo ...

  4. python模块之自定义模块

    模块概述 到此之前,我们都是在一个py文件里操作,接下来,我们学习模块的内容,可以从其他文件引入内容(如函数等) 1. 什么是模块 一个py文件就是一个模块,模块是一些相似功能的集合体 2. 为什么要 ...

  5. MySQL的随笔

    数据库引擎 MySQL5.0支持的存储引擎包括MyISAM,InnoDB.MEMORY.MERGE.BDB等等,其中InnoDB和BDB提供事务安全表,其他存储引擎都是非事务安全表. MyISAM M ...

  6. SpringBoot系列: 使用MyBatis maven插件自动生成java代码

    ====================================pom.xml 文件====================================需要在 pom.xml 文件增加 m ...

  7. Groovy 设计模式 -- Strategy 模式

    策略模式 https://en.wikipedia.org/wiki/Strategy_pattern In computer programming, the strategy pattern (a ...

  8. JavaSE回顾及巩固的自学之路(三)——————所有语言的都存在的基本运算

    在上一篇的博客中,我回顾到Java中的关键字,标识符等知识点,而今天这篇博文将回顾Java的,哦,不,不止Java,据本人了解,几乎在所有的语言中的基础阶段,都会存在这些运算,只是语法不一样而已. 今 ...

  9. luogu P3236 [HNOI2014]画框

    传送门 我们把一种方案的\(\sum a_{i,j}\)和\(\sum b_{i,j}\)看成点\((\sum a_{i,j},\sum b_{i,j})\),那么就只要求横纵坐标之积最小的点,类似于 ...

  10. 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 ...