CSS的继承性和层叠性(四)

一. 继承性

继承：有一些属性，当给自己设置的时候，自己的后代都继承上了，这便是继承性。继承性从自己开始，直到最小的元素。
继承的属性有:color、text-开头的、line-开头的、font-开头的、
文字样式的，都能继承,而所有关于盒子的、定位的、布局的属性都不能继承。

二. 层叠性

层叠性:就是CSS处理冲突的能力。所有的权重计算，没有任何兼容问题

2.1 当选择器，选择上了某个元素的时候，那么要这样统计权重

统计权重的顺序:id的数量,类的数量 ,标签的数量

Snip20161108_11.png

2.2 如果权重一样，那么写在后面的为准

Snip20161108_12.png

2.3 如果不能直接选中某个元素，通过继承性影响的话，那么权重为0

Snip20161108_13.png

2.4 如果大家都是0,则就近原则(谁描述近，就听谁的)

Snip20161108_14.png

大杂烩

Snip20161109_1.png Snip20161109_2.png Snip20161109_3.png

额外补充关于权重

1.同一标签，携带了多个类名，有冲突

<p class="cls1 cls2">我是啥颜色???</p>
<p class="cls2 cls1">我是啥颜色???</p>

与结构中的顺序无关，而与css的顺序有关

.cls1{
  color:red;
}
.cls2{
color:yellow;
}

结果是yellow.因为yellow写在后面

2.!important(重要的)标记
!important来给一个属性提交权重，这个属性的权重就是无穷大。语法:k:v!important

Snip20161109_4.png
!important提升的是一个属性，而不是一个选择器
!important无法提升继承的权重，该是0还是0
HTML结构

    <div>
           <p> 猜猜我是啥颜色</p>
     </div>

CSS样式

 div{
            color: red!important;
        }
        p{
            color:  gold;
        }

最终显示的颜色为gold,因为!important无法提升它的权重，因为p标签已经选中了,故显示颜色为gold

!important不影响就近原则
3.权重计算图例总结

权重计算图例

---

权重总结
1>先看有没有选中，如果选中，则以(id数量，类数量，标签数量)来计算权重，谁大听谁的，如果都一样，听后写的为准。
2>如果都没有选中，那么权重为0,如果大家都是0，就近原则。