CSS三大特性

1.CSS层叠性

概念：

所谓层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

原则：

样式冲突采用就近原则一般哪个样式距离结构进就使用那个，样式的使用采用先后排列的顺序，冲突样式会由新样式把旧样式给覆盖掉，当样式不冲突时不会进行层叠。

2.CSS继承性

概念：

子标签会继承父标签的一些样式，例如文火格式或是字体颜色等等。如果要设置一个可以继承的属性可以直接设置在父元素上(就像我最喜欢在body标签上设置_font-famliy_)。

注意：

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
  
• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）。

3. CSS优先级

概念：

经常会出现不同的样式出现在同一个元素上，如果：

• 选择器相同，则执行层叠性
  
• 选择器不同，就会出现优先级的问题。

  1). 权重计算公式

  关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）。

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
  
• 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
  
• div { color: pink!important; }
  

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算

• div ul li ———> 0,0,0,3
  
• .nav ul li ———> 0,0,1,2
  
• a:hover ——-—> 0,0,1,1
  

• .nav a ———> 0,0,1,1
  

  注意：

1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3). 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.