css 權重：包含深度選擇器

文 / 西打藍 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

閱讀量次

聯絡與合作

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

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

Email: frank@siddharam.com