CSS的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。

继承性：
• 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
• 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
浏览器控制面板：

继承性应用：

• 继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖
先级标签比如 <body>，后期所有的后代标签都可以从 <body> 进行继承。

层叠性：

• 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？
• 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
• 判断最终胜出的属性是谁，需要依赖判断优先级。
判断方法：

选中目标标签：

• 第一步：比较多个选择器的权重，权重高的层叠权重低的。
• 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器。
• 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
• 比较顺序：( id 个数, 类的个数, 标签的个数 )
• 第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。

选中目标标签的组先级 ：

• 如果选择器选中的是祖先元素，文字的样式可以被继承。
• 第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。
• 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。
• 第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
! important 关键字：
如果在比较选择器权重的过程中，遇见一个！important关键字，可以将某条CSS样式属性的权重提升到最大。
书写位置:在某个css属性的属性值后面空格加！important。
注意:
①就近原则中，不需要比较选择器权重，所有important会失效。
②important不能提升选择器的权重，只能提升某条属性的权重到最大。
行内式权重 ：
• 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
• 但是，与 ！important 关键字相比权重要低。
总结：
 

 

CSS 层叠式-理解层叠性和继承性的更多相关文章

  1. CSS学习笔记03 CSS层叠性、继承性、特殊性

    层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...

  2. 0017 CSS 三大特性：层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

  3. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  4. css层叠性和继承性

    1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...

  5. 认识CSS中css的三大特性：层叠性、继承性以及优先级

    前端之HTML.CSS(四) CSS CSS三大特性 层叠性:多种样式的叠加,一个属性通过两个选择器设置在同一个元素上,后一个样式会把前一个样式层叠(覆盖).层叠性的两种情况:第一种样式冲突时,后样式 ...

  6. css中的层叠性及权重的比较

    假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...

  7. css 权重值(层叠性)详解

    目录 css权重值(重叠性)实例 权重值的计算 !important 提升权重值实例 什么情况下可以使用!important ? 总结: css权重值(重叠性)实例 css中有很多选择器,那在多个选择 ...

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

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

  9. 【CSS】我的颜色到底听谁的？—— css的层叠性

    我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...

  10. CSS 三大特性 层叠 继承 优先级

    css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...

随机推荐

  1. Django的urls的配置

    在一个请求到达的时候,最先达到的就是视图层,然后根据url映射到视图函数.这一部分我们来说明url的配置. 概述 为了给一个应用设计URL,你需要创建一个Python 模块,通常称为URLconf(U ...

  2. MySQL中的sql优化

    目标: 掌握SQL调优的原则 掌握SQL调优的基本逻辑 掌握优秀SQL的编写方案 掌握何为慢SQL以及检测方案 SQL优化原则 1.减少数据量(表中数据太多可以分表,例如超过500万数据  双11一个 ...

  3. [NOIP1996 提高组] 挖地雷

    题目描述 在一个地图上有N个地窖(N≤20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径. 当地窖及其连接的数据给出之后,某人可以从任一处开始挖地雷, 然后可以沿着指出的连接往下挖(仅 ...

  4. LVM分区扩容

    LVM分区扩容 用户需求:  将根分区有50G扩容到300G,以满足dmdb 集群用户后期增加需求 1. 查看当前硬盘分区情况,看到当前根分区只有50G 2.  vgs  查看逻辑卷情况,发现root ...

  5. Docker命令（转载）

    Docker命令 参考资料 Docker文档 https://docs.docker.com 命令格式 docker <选项><命令><参数>   Docker命令 ...

  6. pip修改镜像源

    # 单独一次下载软件 pip install markdown -i https://pypi.tuna.tsinghua.edu.cn/simple # 全局修改 pip config set gl ...

  7. Verilog仿真遇到的问题

    1.Vivado 15.4仿真时编译没有报错,但是仿真不成功,逻辑很简单,full为高电平时,rd_en要拉高,但全程没有拉高! 检查语法发现语句" else if( empty == 'b ...

  8. angularjs 1.4.x 内部组件介绍

    内部Services 1, $cacheFactory angular 内部缓存类,构建一个缓存对象. var cache = $cacheFactory('cacheId'); expect($ca ...

  9. java抽象类继承抽象类和抽象方法 java抽象类继承抽象类和抽象方法

    抽象类除了不能实例化对象之外,类的其它功能依然存在,成员变量.成员方法和构造方法的访问方式和普通类一样. 由于抽象类不能实例化对象,所以抽象类必须被继承,才能被使用.也是因为这个原因,通常在设计阶段决 ...

  10. CF513F2 题解

    题意 传送门 有 \(a+b+1\) 个会动的棋子,在一个大小为 \(n\times m\) 的棋盘上,棋盘上有一些点有障碍.棋子中,有 \(a\) 个红色棋子,\(b\) 个蓝色棋子,和 \(1\) ...