February 24, 2020

css 權重:包含深度選擇器

!important、inline、id、class、element


文 / 西打藍 Siddharam

面試考題


會寫這篇,主要是曾面試到一份,比較各類選擇器權重的考題。

其中竟包含了深度選擇器,後來回家測試後發現,它仍屬於 clss、id 的範疇,所以決定紀錄一下。

css 權重


權重由高往低排列,是:

!important > inline > id > class > element


範例如下:



<div class="div-class" id="divId"></div>

.div-class {

}

#divId {

}



!important



.div-class {
  background: red !important;
}




inline style



<div class="div-class" id="divId" style="background: red;"></div>




id



#divId {
  background: red;
}




class



.div-class {
  background: red;
}




element



div {
  background: red;
}




深度選擇器


通常是 css 有 scope 的情況下,才會用到深度選擇器,如果是以 class 的寫法做深度選擇時,它的權重會落在 class 的最高級。



// basic-table 是組件,裡頭其中一個 class 命名為 table

<div class="div-class">

  <basic-table class="table"></basic-table>

</div>



<style>

// 深度選擇器

.div-class /deep/ .table {
  background: red;
}

</style>




所以結論是:

!important > inline > id > 使用 class 的選擇器 > class > element




閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發,或是諮詢需求,皆可至個人網站參考作品,並聯繫 IG

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: frank@siddharam.com