第三篇 css - 优先级 - 【 级联 和 继承 】

概述

CSS样式优先级分为 两 大类
 
  1、级联
  
  2、继承

级联

CSS 级联 规则决定了 样式冲突 时 胜出 的样式，这 三条 规则按照优先级 从高到低 分别为
 
  1、样式表来源
  
  2、选择器优先级
  
  3、代码顺序
  
样式表来源 优先级最高
 
如果来源一致，那么取决于 选择器 优先级（行内样式归纳到选择器这一条）
 
如果 选择器 也一致，那么优先级取决于 代码的顺序  

1、样式表来源
 
样式表来源主要有 两个 地方
 
   1、作者样式表【 也就是咱们自己写的样式 】
   
   2、用户代理样式表【 也就是俗称的浏览器默认样式 】
   
     比如 列表 有 左侧内边距，有左侧小黑点，链接 是蓝色而且有下划线
     
 作者样式表的优先级高于用户代理样式表    
 

2、选择器优先级
 
分为两部分
 
  1、HTML 行内样式
  
  2、选择器的样式
  
a、HTML 行内样式 优先级 规则
 
  1、HTML行内样式 的优先级高于所有 其他样式 的优先级
 
  2、除了 !important  加了 !important 的样式优先级最高
 
  3、没有别的样式能覆盖 行内样式 +!important 
  
b、选择器的优先级  规则  【 很复杂 】
 
  1、ID选择器 最多的样式优先级最高
  
  2、如果 ID选择器 数量一致，那么 类选择器 最多的样式 优先级 最高
  
  3、如果ID选择器和类选择器的数量都一样，那么标签选择器最多的样式胜出
  
  4、伪类选择器（:hover）和 属性选择器（[type="input"]与类选择器优先级相同

3、源码顺序
 
如果前边所述的优先级都相同，那么出现在代码顺序后边的样式会覆盖代码顺序在前边的样式
 
.nav a {
    background-color: red;   
}
 
a.featured {
    background-color: orange;
}
 
上面两个样式的优先级相同，一个选中了.nav的后代a，一个选中了 a 中的 .feature ,因为后者出现在代码后边，所以优先级更高，会覆盖前面的样式

继承

除了级联之外，还有一种给元素添加样式的方式  => 继承
 
  1、继承的样式没有优先级
 
  2、不是所有的属性都能被继承
  
     默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些
     
     1、它们主要是跟文本相关的属性
     
       color
       
       font
       
       font-family
       
       font-size
       
       font-weight
       
       font-variant
       
       font-style
       
       line-height
       
       letter-spacing
       
       text-align
       
       text-indent
       
       text-transform
       
       white-space 
       
       word-spacing
       
    2、还有一些其他的属性也可以被继承，比如列表属性
    
      list-style
      
      list-style-type
      
      list-style-position
      
      list-style-image
      
      表格的边框属性 border-collapse  border-spacing
      
3、可以在适当的场景使用继承
 
   比如给 body 元素应用字体，让后代元素继承该字体，因为继承的样式没有优先级，所以很容易被覆盖      
 
4、inherit 关键字
 
   1、inherit 关键字可以让元素继承父元素的属性，可以用来覆盖原来的值
   
   
   <div class="footer">
      <a href="#"></a>
   </div>
   
   /* 全局尚未访问链接的颜色 */
   
   a：link{
     color：blue
   }
 
   /* 父元素 */
   
   .footer {
     color: #666
   }
   
   /* 优先级与 a:link 相同，都是一个标签选择器和一个(伪)类选择器，所以全局 color 被父元素的 #666 覆盖 */
   
   .footer a {
     color: inherit
   }
 
   a 的 color 设置了继承，所以第三个规则覆盖了全局规则
 
  2、还可以使用 inherit 继承一些默认不会被继承的属性
  
  :root {
    box-sizing: border-box;
   }
 
  *,
  ::before,
  ::after {
    box-sizing: inherit;
  }
  
  如代码所示，将根元素盒模型设置为 border-box，然后全局继承根元素
  
  这么做是考虑到有的组件是使用的 content-box，但是我们全局的选择器把所有元素的盒模型都改成了 border-box
  
  所以这时候只需要把这个组件顶级容器的盒模型改成 content-box，那么组件内的元素就会继承这个顶级元素，恢复到 content-box
  
  .some-component {
    box-sizing: content-box;
   }