重头学习html5+css3系列笔记（5）

CSS的三大特性

css具有三大特性：层叠性，继承性，优先级。

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
原则：
样式冲突，遵循的就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠（以最后一个为准）
（多个类叠加使用时，也是遵循层叠性）

继承性

子标签会继承父标签的一些样式（inherited from）,比如文本颜色和色号
恰当的利用继承性可以简化代码，降低css样式的复杂性
但是子标签一般只会继承某些样式，一般是与文字有关的，如text-,font-,line-,color等，像padding等不会继承

行高的继承（相对单位）

 body {
          font: 16px/1.5 'Microsoft YaHei'
      }

1.5是一个相对单位，即行高是16*1.5，该行高也会被继承，不过会以子元素对应的文字大小进行计算
这样写的好处是可以根据文字的大小自动调整行高，文字大时变大，文字小时变小

优先级

不同的选择器优先级不同，当选择器相同时，按层叠性原则执行，当选择器不同时，对应选择器权重，权重越高，则优先执行该选择器内的样式，与声明顺序无关

选择器	选择器权重
继承或*	0，0，0，0
元素选择器（标签）	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

比如：

a {
            color: rgb(42, 184, 219) !important
        }

.primer {
            color: #000;
        }
  

 <a class="primer" href="#">五彩导航</a>

则最终会a标签会是蓝色
（注意a标签有些特殊，即浏览器会自动用元素选择器为a标签指定样式，所以给我们的直观感觉就是没有继承，其实是继承了，但是由于继承的权重最低，被覆盖掉了，因此我们可以利用层叠性再用元素标签指定样式）

权重由四位数字组成，但不会有进位
等级判断从左往右，如果某一位数值相同，则判断下一位数值

权重叠加

  ul li {
            color: red;
        }
 li {
            color: green;
        }

之前以为是同级标签，权重相同，所以按照层叠性来显示，这是错误的，权重会叠加的，比如ul li 的权重此时就变成了0，0，0，2，他是比li大的，所以会按照他的显示（这也就和前边提到过的权重不会进位有了关系）

 <ul class="nav">
        <li class="primer">123</li>
        <li>456</li>
        <li>789</li>
    </ul>

 .nav li {
            color: red;
        }
 .primer {
            color: #000;
        }

       

第一个li文字会是红色，因为其所对应的权重较高（0，0，1，0）（0，0，1，1）

 .nav li {
            color: red;
        }
 .nav .primer {
            color: #000;
        }

第一个li这是会是黑色（0，0，2，0）（0，0，1，1）
也就是其父元素也会参与到权重计算中，可以说，范围越小，权重越高