CSS优先级

层叠，指的是样式的覆盖，当样式发生冲突时 ,以优先级高的为准
同一个元素的 同一个样式属性 被运用上多个属性值时，一定要遵循优先级规则 来选择属性值

样式发生冲突常见的五种情况
1. 引入方式冲突
2. 继承方式冲突
3. 指定样式冲突
4. 继承样式和指定样式冲突
5. !important


1. 引入方式冲突
CSS有三种常用的引入方式：外部样式  内部样式  和 行内样式
行内样式 > (内部样式 = 外部样式）
行内样式的优先级别最高，内部样式和外部样式优先等级相同，如果内部样式和外部样式同时存在，则遵循 后来者居上 原则，（最后引入的样式为准）

外部样式 定义字体为红色，内部样式定义字体为橘色，行内定义字体颜色为蓝色， 字体最终的颜色是蓝色

从优先级的角度出发：内部橘色 覆盖外部红色，（遵循后者居上），然后行内蓝色 覆盖 内部的橘色， 因为行内的优先级别是最高的 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    <style>
      div{color:orange;}
    </style>
</head>

 <div style="color:blue;">百度网</div>

 

 


2. 继承方式冲突
"最近的祖先元素" 获胜，祖先元素指的是：当前元素的父元素，"爷"元素
如下面这个例子， 最近的祖先元素获胜 颜色为绿色，因为#son元素的最近祖先元素为#father元素，如果#father么有定义color属性，则最近祖先元素为#grandfather元素

 <style>
      body{color:red;}
      #grandfather{color:blue;}
      #father{color:green;}    
    </style>

  <div id="grandfather">
    <div id="father">
      <div id="son">百度网</div>
    </div>
  </div>

 

 

3. 指定样式冲突
指定样式：指定"当前元素"的样式，
当直接指定的样式发生冲突时，样式权重高者获取
行内样式 > id选择器 > class选择器 >元素选择器
例如下面的例子，id的选择器权重最高 所以为红色
 注：我们不应该只从样式顺序来判断，因为只有选择器权重相同时，才会遵循"后来者居上"的原则

  <style>
      #love{color:red;}
      .love{color:yellow;}
      div{color:blue;}
     
    </style>

      <div id="love" class="love">百度网</div>

 

 


在css中，选择器权重的计算 只针对指定样式(当前元素）并不能用于继承样式

   <style>
      /* 
      例子中 #outer .inner{}权重最高，应该是橘色，可实际变成了绿色
      因为例子中所针对的当前元素为strong,而 #outer .inner{}针对元素是p(strong的祖先元素)并不是strong
      也就是说，如当前元素为strong,则 #outer .inner{} 和  #outer p{}都属于样式继承
      在继承样式中，不能用选择器权重这一套东西来计算
      
      */
      #outer p{color:red;}/* 权值=100+1=101 */
      #outer .inner{color:orange;}/* 权值=100+10=110 */
      #outer p strong{color:pink;} /* 权值=100+1+1=102 */
      #outer p span strong{color:green;}  /* 权值=100+1+1+1=103 */
 
    </style>

  <div id="outer">
    <p class="inner">
      <span><strong>百度网</strong></span>
    </p>
  </div>

 

 

4. 继承样式和指定样式冲突      
在css中，选择器权重的计算 只针对指定样式(当前元素）并不能用于继承样式
当指定样式 和 继承样式发生冲突时，指定样式获胜，先判断指定样式 后考虑继承样式

 <style>
    body{color:red;}
    #outer{color:blue;}
    .inner{color:orange;}
    span{color:palegreen;}
    strong{color:pink;}
  </style>

  <div id="outer">
    <p class="inner">
      <span><strong>百度网</strong></span>
    </p>
  </div>

 
！important 规则来改变样式的优先级
如果一定要使用某个样式属性，为了不让它被覆盖，则可使用！important来声明
或是你想覆盖其他所有的样式，可以使用!important来实现

下面这个例子，#outer .inner strong{color:pink;} 的权重最大，strong的颜色应该是粉色
因为strong{}中应用 了！important  所以颜色为咖啡色

<style>
   #outer strong{color:red;}
   #outer .inner strong{color:pink;}
   .inner strong{color: orangered;}
   strong{color:saddlebrown !important;}
  </style>

  <div id="outer">
    <p class="inner">
      <span><strong>百度网</strong></span>
    </p>
  </div>

 

 

！important的用处   常见的2种使用情况
1，在外出有#someId的情况下，如何让p变成绿色，在这种情况下 如果不使用！important，则第一条样式永远比第二条样式优先级要高

 <style>
    #soneId p{
      color:red;
    }
    p{color:green !important;}

  </style>


   <div id="soneId">
    <p>这是段落</p>
  </div>

 

 


2，写了效果很差的行内样式（行内样式优先级是最高的）如果在内部 或外部样式表中修改这个样式，可以用！important去覆盖那些行内元素

总之
1.。优先级别高的样式 覆盖优先级别低的样式
2， 同一优先级别的样式，后定义的覆盖先定义的，即后来者居上

 


CSS引入方式
1，外部样式
2，内部样式
3，行内样式
还有一种@import方式（即导入样式表），与外部样式相似，但很少用，更倾向用link方式 （外部样式）
因为 link先加载CSS后加载HTML,@import是先加载HTML后加载css
那如果HTML在CSS之前加载，用户体验差

要灵活运用上面的这三种方式：外部样式用于公有样式，
                                                  内部样式多用于私有样式
                                                  行内样式多用于小修改或者优先级方面




 
















posted @ 2021-01-04 15:24  沁莹  阅读(215)  评论(0)    收藏  举报