CSS的三大特性

CSS三大特性

1，层叠性

当相同选择器为某个元素设置了相同属性时，如先给一个盒子设置了红色的背景色，后面又给它设置了绿色的背景色，此时后来设置的会覆盖掉先前设置的背景色，这就是css的层叠性
。

<div></div>
 
 <style>
 div{
   width: 100px;
   height: 100px;
   background-color:rosybrown;
   background-color: black;
 }
 </style>

此时效果图为

2，继承性

我们都知道html标签是存在嵌套关系的，即存在父子关系，而子元素是可以继承父元素的某些属性的，并不是所有属性，如font-，line-，text-开头的属性，以及color属性

 <div class="father">我是父盒子
   <div class="son">我是子盒子</div>
 </div>

<style>

.father{
  width: 200px;
  height: 200px;
  background-color:rosybrown;
  font-style: italic
  /* 给父元素设置斜体 */

}
.son {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color:saddlebrown;
}

</style>

此时子元素就继承了父元素的属性，父元素字体是斜体，子元素也是斜体。

3，优先级

前面提到，如果是相同选择器对元素设置样式，后面的会覆盖掉前面的，但是如果是不同选择器呢？这样就出现优先级的问题了，不同的选择器权重是不一样的，具体排序如下

！important>行内样式>id选择器>类和伪类选择器>标签选择器>继承或者通配符选择器
注：！important只能控制一行语句，如果要给所有属性添加最高优先级，每一句都要加，由此可见比较麻烦

.son {
  width: 100px!important;
  height: 100px!important;
  margin: 0 auto;
  background-color:saddlebrown!important;
}

但又出现一个问题，如果我们使用复合选择器，此时应该如何去比较权重呢？此时就可以使用具体数值来计算，具体如下

选择器	权重
继承或通配符选择器	0
标签选择器	0.001
类和伪类选择器	0.01
id选择器	0.1
行内样式	1
！important	无穷大

举例，一个复合选择器 .box,#land{}的权重计算就是0.11，在使用不同复合选择器来设置同一个元素样式时，可以利用这个公式来计算，比较两者的优先级，谁优先级高就用谁的。