关于前端:CSS的特性之层叠性介绍

初学者在学习到 CSS 的时候会理解到它具备继承性、层叠性、优先级等等不同的属性，如果不理解这些属性会导致咱们在应用它的时候呈现各种各样的问题，明天小千就来给大家介绍一下 CSS 的层叠性属性。

  CSS 层叠性的概念：有多个选择器或一个选择器对某个或某几个标签中的多条款式进行抉择，如果多个选择器都赋给某个或某几个标签雷同属性，款式的作用范畴产生了重叠

  CSS 层叠性的体现：1. 款式无抵触

css 款式 1

  以上代码中，款式代码并无抵触，两个选择器中的所有款式都叠加到了元素 div 上，div 最终出现的是一个红色的，宽高度大小为 100px 的容器。2. 款式有抵触

  款式有抵触，同一级别不受优先级影响时

css 款式 2

  以上代码中，在同级别时（同个元素，同是 class 定义选择器名称），[游戏](http://www.pizei.com) 款式代码呈现抵触，两个选择器中呈现同一条 width 属性，则以 CSS 代码中最初呈现的那条款式为准，div 最终出现的是一个 width 为 200px，height 为 100px, 红色的容器。款式有抵触，不同级别受优先级（权重）的影响时，CSS 规定根本选择器的优先级从低到高排序为：元素（标记）款式 < 类别（class）款式 < ID 款式 < 行内款式 < !important。2-1：类别（class）款式 VS 元素（标记）款式

css 款式 3

  以上代码中，class 款式的优先级大于元素款式的优先级，即便 div 设置的 width 写在前面，最终出现的是一个 width：200px，height：100px；背景色为红色的容器。2-2：ID 款式 VS 类别（class）款式

css 款式 4

  以上代码中，ID 款式的优先级大于 class 款式的优先级，最终出现的是一个 www.pizei.comwidth：200px，height：100px；背景色为黄色的容器。2-3：行内款式 VS ID 款式

css 款式 5

  以上代码中，CSS 行内款式优先于 ID 的款式，div 最终出现的是一个宽度为 200px，高度 100px，背景色彩为粉色的容器。2-4：!important VS 行内款式

css 款式 6

  在 CSS 中，!important 具备最高优先级，并且能够写在任意一条有抵触款式的前面。在以上代码中，div 在行内样式表设置背景色为粉色，ID 款式中 width 为 200px；然而在 class 款式中，width：100px 及背景色为 red 的前面都增加了!important，因而，最终出现的是一个宽度为 100px，高度为 100px，背景色为红色的容器。以上就是 css 层叠性的几种不同状况的介绍了，同学们在开发过程中遇到的问题根本都在下面的状况中了。