如何讓我的@import樣式表覆蓋主樣式表？

我在主樣式表文件中使用@import導入了另一個樣式表。我希望我在@import樣式表中所做的更改覆蓋主樣式表。這可能嗎？如何讓我的@import樣式表覆蓋主樣式表？

2011-10-03 Kenshi

在主樣式表後面執行@import，你應該沒問題 –

剛剛試過了，現在不再載入了 – Kenshi

如果您的目標是通過導入其他樣式表來覆蓋樣式，則應該使用優先順序。

<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。

來源

2011-10-03 22:00:56 Kirk

這工作謝謝！ – Kenshi

@import第二個樣式表在第一個末尾。

你混淆!important和@import

來源

2011-10-03 21:54:34 Eric

試圖添加@i mport在最後它不再加載css。我不想使用！重要的，因爲我必須爲我想改變的一切做到這一點，必須有一個更簡單的方法。 – Kenshi

如果你的第二個樣式使用相同的選擇，那麼就應該重寫沒有任何問題的第一位。

CSS有一個非常嚴格的優先順序來確定哪一個應該被使用，但是如果其他所有條件都相等並且兩個樣式具有完全相同的優先級，那麼它將使用最後指定的那個。這允許您稍後通過重複相同的選擇器來覆蓋樣式。

唯一的例外是，如果第一個樣式被指定爲!important。在這種情況下，重寫它就困難得多。甚至指定!important的另一種風格可能並不總是有效（我曾見過它在某些瀏覽器中運行的情況，但在其他瀏覽器中運行的情況並非如此）。

所以，如果以前的樣式表使用!important那麼你可能有問題覆蓋它。但是，如果不是，它應該相當簡單。

來源

2011-10-03 22:00:29 Spudley

該解決方案對我來說非常合適。

複製main.css並將其重命名爲style.css。在main.css的刪除所有與過去：

@import url("style.css"); 
@import url("style-override.css");

這就是所有。

來源

2015-07-31 09:57:04

您還可以使用更具體的類名 - 如果你想在新的CSS使用

body div#sample { 
max-width: 75%; 
}

改變

div#sample { 
max-width: 75%; 
}

只要記住，這條件太好選擇不是最好的例子主意;）

來源

2016-09-06 09:42:25

如何讓我的@import樣式表覆蓋主樣式表？

回答

相關問題