CSS基础 CSS的三大特性以及选择器优先级计算方法

1.子元素默认会继承父元素的样式，但不是所有的元素都有继承
   常见的继承父元素特点的元素有:
           1.color
           2.font-sytle、font-weight、font-size、font-family
           3.text-indent、text-align
     注意：可以通过chrome浏览器查看是否支持继承，可在style中看到inherited from （div father）。。。也就是说权限来自于哪里

应用场景

（1）去除ul中的无序列表中的小黑点，可以直接设置给ul{list-style：none；} 相等于 li{list-style：none；}

（2）修改整体浏览器的字体大小，可以直接设置body的字体大小；

继承失效的常见标签说明

a标签继承失败原因呢，它本身有浏览器默认样式和颜色，所以失败

h1标签继承失败的原因，h1的特性是两个字的大小，如果父级是20px，则h1文字大小是40px

div标签高度继承失败原因，是本身不具备继承，宽度感觉可以继承，其实是因为div本身的特性<独占一行>特显出来的

注释：继承和本身的样式的优先级，优先与它本身的自己的样式，而后继承

2.CSS的层叠性
  特性：1.多个样式可以叠加到一个标签上
       2.一个标签，相同样式则会覆盖，以最后一个样式为准
 注意：选择器要在同一个优先级的情况产生的情况，优先级顺序：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

3.优先级的使用方法
公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点：1.!important写在属性值的后面，分号的前面；
       2.!important不能提升继承的优先级，使用也是无效的;
       3.事件开发中不建议使用!important;

4.复合选择器  权重叠加计算

比较规则

1.从左到依次比较，各个选择器或样式出现的个数，最大的优先级大；

2.如果第一个行内样式出现的个数相同时候，比较第二个id选择器的个数，依次比较；

3.如果最终的数字相同，表示优先级相同，则比较层叠型，谁写在最后谁生效；

例如：结构

<div class='father'>
     <p class='son' id='first'>内容
</div>

CSS样式：
      div #first{        /* 0 ,1 ,0, 1 */
         color:red;    
      }
      .father .son{     /* 0 ,0, 2 ,0 */ 
         color:blue;
      }
      .father  p{      /* 0 , 0 , 1 , 1 */
         color:pink;    
      }
      div p{          /* 0 , 0 , 0, 2  */
          color:green;
       }
由此对比可得div #first的复合选择器优先级高，则显示红色字体；从左到右依次比较
注意：1.先比较是否能匹配到要得到的内容，如果只有个别是继承的直接pass，如果有交集选择器在css中出现，在数它的个数的时候也要算在内；比如p.one,则是1个标签选择器和一个类选择器
     2.如果都是继承来的样式，优先取父元素的样式使用