我在主樣式表文件中使用@import
導入了另一個樣式表。我希望我在@import
樣式表中所做的更改覆蓋主樣式表。這可能嗎?如何讓我的@import樣式表覆蓋主樣式表?
回答
如果您的目標是通過導入其他樣式表來覆蓋樣式,則應該使用優先順序。
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
這裏style.css
是原始和style-override.css
將包含新的自定義CSS。這些樣式將覆蓋style.css
的樣式。這意味着您將不需要使用!important
,因爲樣式被覆蓋。
避免!重要的時候你可以。
要做到@import
<style type="text/css">
@import url("style.css");
@import url("style-override.css");
</style>
另外,作爲一個側面說明,如果你寧願從頁面中移除所有樣式,使用CSS復位。
<style type="text/css">
@import url("style.css");
@import url("reset.css");
@import url("style-override.css");
</style>
查看CSS reset在http://meyerweb.com/eric/tools/css/reset/並將其添加到reset.css。
這工作謝謝! – Kenshi
@import
第二個樣式表在第一個末尾。
你混淆!important
和@import
試圖添加@i mport在最後它不再加載css。我不想使用!重要的,因爲我必須爲我想改變的一切做到這一點,必須有一個更簡單的方法。 – Kenshi
如果你的第二個樣式使用相同的選擇,那麼就應該重寫沒有任何問題的第一位。
CSS有一個非常嚴格的優先順序來確定哪一個應該被使用,但是如果其他所有條件都相等並且兩個樣式具有完全相同的優先級,那麼它將使用最後指定的那個。這允許您稍後通過重複相同的選擇器來覆蓋樣式。
唯一的例外是,如果第一個樣式被指定爲!important
。在這種情況下,重寫它就困難得多。甚至指定!important
的另一種風格可能並不總是有效(我曾見過它在某些瀏覽器中運行的情況,但在其他瀏覽器中運行的情況並非如此)。
所以,如果以前的樣式表使用!important
那麼你可能有問題覆蓋它。但是,如果不是,它應該相當簡單。
該解決方案對我來說非常合適。
複製main.css並將其重命名爲style.css。 在main.css的刪除所有與過去:
@import url("style.css");
@import url("style-override.css");
這就是所有。
您還可以使用更具體的類名 - 如果你想在新的CSS使用
body div#sample {
max-width: 75%;
}
改變
div#sample {
max-width: 75%;
}
只要記住,這條件太好選擇不是最好的例子主意;)
- 1. WordPress的 - 覆蓋主題CSS樣式表
- 2. 如何覆蓋樣式表 - 的Joomla
- 3. 如何覆蓋@media樣式表
- 4. 用戶代理樣式表覆蓋我的表格樣式嗎? Twitter Bootstrap
- 5. 停止的site.css覆蓋表樣式
- 6. 用戶代理樣式表覆蓋自己的樣式
- 7. 樣式,minHeight/maxHeight:我無法讓maxHeight覆蓋主題minHeight
- 8. 移動樣式表與主樣式表
- 9. 覆蓋CSS樣式
- 10. CSS樣式覆蓋
- 11. 覆蓋CSS樣式
- 12. 覆蓋CSS樣式
- 13. 如何覆蓋嵌入式推文的樣式表
- 14. 我如何覆蓋WordPress主題中的以前的樣式?
- 15. 失敗覆蓋引導樣式表
- 16. CKEditor 3:表格樣式被覆蓋
- 17. Rails CSS樣式表覆蓋對方
- 18. 我們如何覆蓋用戶代理樣式表?
- 19. Silverlight工具包主題覆蓋樣式?
- 20. Buildfire:主題是覆蓋樣式
- 21. 我如何從Windows主題繼承/覆蓋強制樣式?
- 22. 覆蓋樣式| JQuery的
- 23. 如何覆蓋NativeBase中的樣式?
- 24. 如何覆蓋wordpress中的css樣式
- 25. 如何停止由tr樣式覆蓋colgroup樣式?
- 26. 如何覆蓋在主CSS文件中設置的CSS樣式(列表樣式類型)
- 27. CSS如何覆蓋外部樣式表中的父類型?
- 28. 如何覆蓋React Native中的樣式表?
- 29. 如何覆蓋嵌入在Telerik程序集中的樣式表?
- 30. 覆蓋ControlTemplate - 不是樣式
在主樣式表後面執行@import,你應該沒問題 –
剛剛試過了,現在不再載入了 – Kenshi