【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無敵最大，可以壓過前面所有的。