iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Modern Web

走入前端,才從0開始數,初學者歷程系列 第 7

day7-css優先權

哈囉!今天是第7日(歐買尬終於一個禮拜了),那今天想先來個重要的基礎了解~

為蝦米要了解優先權?

當你遇到一個物件重複設定CSS屬性,這時候你就會想,那到底要如何才能變成我所設定的樣式?或是,欸!為什麼我明明設定了樣式,為什麼都沒跑出來啊!?這時候就攸關CSS選擇器優先權的問題了!

CSS優先權又能分成:

1.選取器之間的優先權

2.CSS屬性之間的優先權

重點:先看權重,在看先後

  • 行內>內部>外
  • html標籤選擇器1分
  • 類別選擇器10分
  • id選擇器100分
  • style 1000分
  • important 10000分

優先權的順序:animation(執行期間)>!important>inline style>ID>class與屬性選擇器>Tag>*號萬用選取器>繼承的屬性

直接上個範例:

<div id="logo" class="header">
  HELLO
</div>
div {
  background-color: purple;
}
.header {
  background-color: blue;
}
#logo {
  background-color: pink;
}

可以猜猜看,HELLO的背景到底會是什麼顏色呢?

鐺鐺鐺~

是粉.紅・色! 因為div是1分,.header是10分,#logo是100分,可以得知最重的是#id選擇器,所以是粉紅色喔~

當然你也可以複製這個程式碼,開始玩覆蓋遊戲:)可以更了解權重關係。


!important :NO.1

是NO.1,可以不在乎任何人。 巴特!就是因為這樣,在新手時期就會變成濫用,以致後續修改很麻煩,所以非不得已情況下,「盡量不要使用」!「盡量不要使用」!「盡量不要使用」!(很重要所以說三次,絕對不是要湊字數啦

<div class="content">貓貓狗狗</div>
div{
  color: blue !important;
  font-size: 40px !important;
}
.content{
  color: red;
  font-size: 24px;
}

出來的結果會是:

https://ithelp.ithome.com.tw/upload/images/20200921/20130106EYrGEmXEQ2.png
因為他是!important,所以可以不用管任何人,他說你是藍色就是藍色。(霸道


接下來三個是看書才知道的訊息

「*號」萬用選取器

在CSS優先權中倒數第二低的,只高於「繼承而來的屬性」(字面上的意思:若本身沒有設置樣式的話就繼承父層)。

<div>
  <p>貓貓狗狗</p>
</div>
// <p>標籤繼承父層<div>的藍色
div{
  color: blue;
}
// *萬用選取器>繼承父層
*{
  color: pink;
}

https://ithelp.ithome.com.tw/upload/images/20200921/20130106PzQ3V1vB0X.png

因為<p>沒有給予屬性,所以繼承父層<div>的藍色,又因*萬用選取優先權>繼承父層的,最終的顏色是粉紅色。

屬性選擇器的優先權

.header>[class="header"]>[class]

動畫關鍵影格影響的優先權

動畫執行期間有絕對優先權,但脫離動畫執行期間,會恢復到下一階的優先權。

(還沒深入研究動畫,所以先做筆記,日後回顧的話方便)


結論:優先權算是基礎中重要的一門,知道權重後才可以好好的運用~

當你發現樣式沒出現效果的時候,可以開啟chrome除錯,看一下哪個地方的樣式被畫掉,再來依照權重做覆蓋遊戲。

這次部分內容是參考書名:金魚都能懂的CSS選取器。


上一篇
day6-css字體單位em&rem
下一篇
day8-CSS選擇器筆記
系列文
走入前端,才從0開始數,初學者歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言