# CSS的继承性、层叠性、权重
*CSS像艺术家一样优雅，像工程师一样严谨*
### 继承性
CSS样式具有继承性，所谓的继承性，就是给某些元素设置样式时，后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 `color` 属性设置字体颜色，后代自动继承。CSS的继承特性，一定程度上简化了代码的操作，至少方便了我这类懒癌患者。
```html
test
```
这里，在div中设置color，他的后代元素li中的文字，都被设置为了红色，这就是继承性。
注意，并不是所有的CSS属性都会继承，常见的继承属性有：
color、 text- **\_ 、line-\_ *****、font-*** 。
拥有继承的通常是关于文字样式的， 所有关于盒子的、定位的、布局的属性都不能继承。
### 层叠性和权重
层叠性：就是css处理冲突的能力。
当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
可以这样理解权重：这个选择器对于这个元素的重要性。
#### 权重的计算
权重的计算也很简单，当选择器选上了某个元素的时候，就会统计权重，计算的格式为：
```
id数量，类的数量，标签的数量
```
如选择器直接作用到p标签：
```css
#box .imp p{
}
```
的权重为： `1，1，1`
```
div.imp div.imp2 div.imp3 p{
}
```
的权重为： `0，3，4`
#### 那么如何比较权重的大小？
将权重看作三位数，比较即可，但是注意，权重不可以进位！！！（理论上255个标签可以进一位）
比如 权重 `1，0，0` > `0,100,100`
#### 如果两个选择器权重相同会如何？
当选择器的权重相同时，会选择声明在后面的选择器，类似于变量赋值。
```html
test
我最帅！！
```
此时颜色显示为蓝色，因为两个选择器权重相同，蓝色位置靠后。
#### 继承的属性的权重？
前面的案例选择器都直接作用到了p标签，如果效果不是由选择器直接作用的，而是由其他选器继承而来的属性，那么这个属性对于这个元素的权重就为0。
如果两个选择器的权重都为0，就采取继承特性。（即网上所说的就近原则，感觉用继承解释比较合理）
个人认为这个问题没有什么必要去进行处理，如果选择器的权重是0，那么，选择器就不是作用在这个标签上的，也就和这个标签没有关系。这个标签获得的选择器中的某些属性，都是继承来的。权重为0可能是底层的计算。但是这样理解未免有些绕圈圈了。
```
test
```
#### important 标记
```html
test
我最帅！！
```
此时会显示红色，因为 `!important` 标记将这个属性的权重最大化了。
### 总结
