【code】[css]當!imporatn壓不過!importnat的時候怎麼辦?

在Oceanwp佈景主題的內建CSS中有一段語法,個人覺得滿奇怪的,它把購物車中的「單價」在手機瀏覽時隱藏了,而且是用「!important」來隱藏,所以我們自己在自訂CSS中就算下新的CSS語法且也加了「!important」竟然權重壓不過去,所以也無法成功讓手機瀏覽購物車時可以出現商品單價...

原始狀態如下圖:

原本是在後台的 外觀/自訂 →Custom CSS/JS 中,貼上:

/*在手機讓單價顯示出來*/
@media(max-width:767px){
.product-price {
display: block!important;
}
}

但存檔後發現無效,!imporatn壓不過!importnat的情況發生了...

怎辬呢

此時我們可以找上層的id來加深權重,如下圖可以往外層的找,發現有一個id叫「content」

所以我們把剛剛的CSS改一下,改成:

/*在手機讓單價顯示出來*/
@media(max-width:767px){
#content .product-price {
display: block!important;
}
}

這樣就成功了!

註:

一般來說,CSS的優先順序是:

  1. 元素標籤樣式 > style標籤內樣式 > link檔案樣式(外部載入css)。
  2. ID > Class >元素樣式
  3. 後面執行的大於前面執行的。
  4. !important無敵最大,可以壓過前面所有的。

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要問我相關的話,可以加入FB社團一起交流或寫信給我: smallway.tw@gmail.com
  • 如果您需要更系統性的學習,歡迎參考我的線上課程或家教班
  • 如果您有單一性的問題,例如網站健診、文章問題、做不出的功能,目前接受付費線上家教

發表留言