CSS特征之层叠性

大家都知道CSS的中文名称为层叠样式表，从名字中我们可以看出CSS的层叠性是CSS的重点特性。

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

CSS层叠性的体现：

1. 样式无冲突

/*多个选择器作用于同一个元素，但是样式并不冲突 

.box_one{

 width:100px; heigh:100px;

}

.box_two{

  background:green;

}

以上代码中，样式代码并无冲突，两个选择器中的所有样式都叠加到了元素div上，div最终呈现的是一个绿色的，宽、高均为100px的容器。

2：样式有冲突 样式有冲突，同一级别不受优先级影响时

.box_one{

 width:100px; heigh:100px;

}

.box_two{

 width:200px;

  background:green;

}

以上代码中，在同级别时（同个元素，同是class定义选择器名称），样式代码出现冲突，两个选择器中出现同一条width属性，则以CSS代码中最后出现的那条样式为准，div最终呈现的是一个绿色的，宽为200px、高为100px的容器

样式有冲突，不同级别受优先级（权重）的影响时

 !important>style行间(style为属性时)>id>class>tag(标签)>*(通配)>继承

 2-1：类别（class）样式 VS 元素（标记）样式

.box_one{

 width:100px;

background:green;

}

div{

width=200px；

}

以上代码中，class样式的优先级大于元素样式的优先级，即使div标签设置宽度为200px，最终呈现的是一个绿色的，宽为100px的容器。

2-2：ID样式 VS 类别（class）样式

#box{

 width:100px;

background:green;

}

.box_one{

width=200px；

background:red;

}

以上代码中，id样式的优先级大于class样式的优先级，最终呈现的是一个绿色的，宽度为100px的容器。

2-3：行内样式 VS ID样式

#box{

 width:100px;

background:green;

}

<div id="box" style="background:pink"> </div>

以上代码中，CSS行内样式优先于id的样式，div最终呈现的是一个宽度为100px，背景为粉色的容器。

2-4： !important VS 行内样式

.box_one{

width=200px；

background:red!important;

}

<div class="box_one" style="background:pink"> </div>

在CSS中，!important具有最高优先级，在以上代码中，background后面添加了!important,因此最终呈现的是一个宽度为200px的红色盒子。