這篇文章主要介紹了css中權(quán)重值的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css中有很多選擇器,那在多個選擇器都作用于同一個元素的情況下會出現(xiàn)什么效果呢? 代碼

  
    
    
    
      p{
        color:red;
        font-size: 10px;
      }
      #wrap{
        color: deeppink;
        font-size: 30px;
      }
      .box{
        color:yellow;
        font-size: 50px;
      }
    
  
  
    
       猜猜我是什么顏色
    

  

•執(zhí)行可結(jié)果

•小結(jié) : 出現(xiàn)這種效果是因為瀏覽器是根據(jù)權(quán)重值來判斷使用哪種css樣式的，權(quán)重值高的它的優(yōu)先級會越高，就會呈現(xiàn)那種css樣式,id選擇器的權(quán)重值為100>類選擇器10>標(biāo)簽選擇器1,所以最終結(jié)果為id選擇器設(shè)置的樣式

•示列二 代碼

!DOCTYPE html>

  
    
    
    
      *{
          color: cyan;
      }
      div {
          color: yellow;
      }
    
  
  
    

        
        猜猜我是什么顏色
        

    
  

•執(zhí)行結(jié)果

•小結(jié) : 繼承元素是沒有權(quán)重值的,所以最終結(jié)果為通用選擇器設(shè)置的樣式

•實例三 代碼

  
    
    
    
      p{
          color: yellow;
      }
      *{
          color: cyan;
      }
    
  
  
    

        
        猜猜我是什么顏色
        

    
  

•執(zhí)行結(jié)果

•小結(jié) : 標(biāo)簽選擇器的權(quán)重值是1,但是仍然大于通用選擇器,所以最終結(jié)果為標(biāo)簽選擇器設(shè)置的樣式

•實例四 代碼

  
    
    
    
      div p{
          color: yellow;
      }
      div>p{
          color: cyan;
      }
      p{
          color: red;
      }
    
  
  
    

        
        猜猜我是什么顏色
        

    
  

•執(zhí)行結(jié)果

•實例五 代碼

  
    
    
    
      div>p{
          color: cyan;
      }
      div p{
          color: yellow;
      }
      p{
          color: red;
      }
    
  
  
    

        
        猜猜我是什么顏色
        

    
  

•執(zhí)行結(jié)果

權(quán)重值的計算

    
        MJJ