用自定義CSS覆蓋媒體查詢的樣式

我正在爲現有系統編寫一些overrides.css，並想知道我可以覆蓋某些樣式的方式。我沒有訪問系統的CSS，所以我不能重寫它。用自定義CSS覆蓋媒體查詢的樣式

如果我在原來的系統定義如下：

#criterionDetailsWrapper { 
    background-color: green; 
} 

@media screen and (max-width: 979px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
} 


@media screen and (max-width: 667px) { 
    #criterionDetailsWrapper { 
     background-color: grey; 
    } 
}

我怎麼能如覆蓋這些樣式有

I.一個屬性覆蓋所有尺寸：

.criterionDetailsWrapper { 
    background-color: grey; 
}

II。重寫一個屬性更改爲沒有2個斷點，但只有1個斷點在600px？

#criterionDetailsWrapper { 
    background-color: grey; 
} 


@media screen and (max-width: 600px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
}

是!important做到這一點的唯一途徑，或者我需要模仿所有選擇（以獲得相同的特異性），並確保我的自定義CSS渲染最後？

來源

2017-08-08 zmii

是類選擇一個錯字或做你想要的規則適用於與該類的所有元素，它將覆蓋系統規則具有該類別的元素也具有該ID的情況？ – BoltClock

其實媒體查詢不會使特異性更高。這就是您在修改聲明之後聲明它們的原因。因此，只要您處理媒體查詢中包含的所有屬性（並且它們的特異性仍然相同），那麼以css風格聲明它們就足夠了。

請記住在要覆蓋的樣式之後加載overrides.css。

而且醜陋的黑客（但完全符合CSS規範線），alows您可以通過鏈接class和id選擇與自己戰鬥的特異性。

.class.class具有比.class更高的特異性，但低於.class.class.class。

這是壞的，但可能會導致比!important更少的問題。只要override.css來修改樣式表（一個或多個）之後，你提出

在你的情況，例子應該工作。

// orginal.css 
#criterionDetailsWrapper { 
    background-color: green; 
} 

@media screen and (max-width: 979px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
} 


@media screen and (max-width: 667px) { 
    #criterionDetailsWrapper { 
     background-color: grey; 
    } 
}

將被改寫：

// override.css 
#criterionDetailsWrapper { 
    background-color: grey; 
}

在任何屏幕尺寸將是grey現在。

// override.css 
#criterionDetailsWrapper { 
    background-color: grey; 
} 


@media screen and (max-width: 600px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
}

這將有grey背景現在，除非屏幕尺寸高達600px，到時將有blue顏色。 979px和667px將被忽略。

更多的話題：

Calculating specificity - W3C規範

來源

2017-08-08 15:16:58 Olaf

I：我會建議按照你所說的添加特異性檢查元素，你可以確保你的班級會有優先權。！使用

.parents .... #criterionDetailsWrapper { 
    background-color: grey; 
}

重要的是一種不好的做法，但仍然有效...

II：不能取消對一個CSS媒體查詢，而不是你可以覆蓋它作爲你的願望

@media screen and (max-width: 600px) { 
    .parents... #criterionDetailsWrapper { 
     background-color: blue; 
    } 
}

然後定義您的新媒體查詢

來源

2017-08-08 13:00:24

因此，複製精確查詢並改變它或使查詢更具體將工作？ – zmii

是讓你的查詢更具體將使你的房產相關... –

@zmii是的，你可以閱讀這個https://css-tricks.com/specifics-on-css-specificity/有效地覆蓋你的選擇器而不使用！重要。！重要可以是唯一的選擇，當你想覆蓋通過JavaScript注入的內聯樣式或樣式時，它似乎不是你的情況。基本上：具有相同特性的最後一條規則覆蓋了前一條 –

用自定義CSS覆蓋媒體查詢的樣式

回答

相關問題