如何讓CSS文件比其他CSS文件更重要？

11

沒有這樣的魔力。 CSS有它自己的原則，比如級聯，並且你不能關閉它們。

您可以將參考bootstrap.min.css後的參考css.css，但是這是在解決CSS規則如何被應用的過程中只是一個因素。添加!important（通常是錯誤設計的症狀）僅僅是另一個因素：如果較早的文件中的!important規則的選擇器具有較高的特定性，則該規則可能會覆蓋您的!important規則。

要覆蓋CSS規則，您需要分析您希望覆蓋的規則，並根據級聯原則設置一個「獲勝」規則。

來源

2012-10-23 11:43:53

+0

嗯，它看起來像沒有神奇的解決方案呢。 – alnassre

+0

@alnassre就像我說的，你將無法找到一個好的答案，幾乎所有的答案都是正確的，但他們都缺乏。我強烈建議您閱讀這個http://www.w3.org/TR/CSS21/cascade.html試一下，然後在瞭解它的工作原理之後，您將能夠提出更具體的答案主題。 – Dan

+1

「更高的特異性」是正確的提示。我有'div.x'，並且在一些div上還有'x' a'selected'。直到我將CSS從'div.selected'切換到'div.x.selected'時，這才奏效。現在，'selected'具有更高的優先級。 – koppor

2

當包括樣式，它覆蓋前包括樣式表的所有聲明。如果您將您的包含更改爲：

<link href="css/css.css" rel="stylesheet"> 
<link href="css/bootstrap.min.css" rel="stylesheet">

引導程序後來包含在內並將覆蓋來自css.css的propertys。

希望有所幫助。

來源

2012-10-23 11:32:41 tobspr

+1

這還不夠。如果你在不太重要的css文件中有'div .some-class {}'，你不能用'.some-class {}'覆蓋它，但是可能會被'p .some-class {}'覆蓋，這取決於HTML結構。這要比CSS文件的順序複雜得多。特別是因爲OP說'沒有重複類，標籤和ID'，他不清楚他想要什麼，但我認爲這意味着他不想使用相同的規則。 – Dan

+0

是的。但通過他提供的代碼，這是我可以直接提供的唯一解決方案。 – tobspr

+0

@TobiasSpringer完全相反。 'css.css'在那裏是正確的順序，@Dan說的是我確切需要的。 – alnassre

6

簡單，最後包含更重要的CSS文件。

來源

2012-10-23 11:32:43

+2

這還不夠。如果你在不太重要的css文件中有'div .some-class {}'，你不能用'.some-class {}'覆蓋它，但是可能會被'p .some-class {}'覆蓋，這取決於HTML結構。這要比CSS文件的順序複雜得多。特別是因爲OP說'沒有重複類，標籤和ID'，他不清楚他想要什麼，但我認爲這意味着他不想使用相同的規則。 – Dan

+1

@丹，這個問題很簡單，足以保證一個簡單的答案。當然，你說的是正確的，但問題的標題純粹是指使一個文件比另一個更重要。 –

+0

@丹，雖然我在你身邊，但我寧願近乎投票地給出一個答案，最終不回答潛在問題，因此不會增加太多價值。 – GolezTrol

0

如果你不能改變的文件，CSS文件不能正常使用的電話的順序，你可以隨時使用！重要的是，但becuz您需要添加它每一個是要去comsume了大量的時間行的CSS。

ex：display：inline！important;

來源

2012-10-23 11:33:50 Toping

2

我只能給你一個例子。

比方說Bootstrap.css具有以下 .rules #world {border:0px;} [特異性110]

和css.css具有以下 div #world{border:20px;} [特異性101]

在這種情況下，bootstrap.css總是會覆蓋的CSS的CSS。所以，我建議你爲你的所有內容添加一個容器 - 給這個容器一個id ..lets說「god」，然後將前綴.god添加到你在CSS中的所有樣式 - 但是，這不是那麼簡單，並且很大程度上取決於你如何正確計算。

#god div #world{border:20px;}

這是一個長度話題，因爲別人指出的 - 所以你必須從根本上了解所有的引導做你的網頁，什麼是css.css做。

您可以隨時查找此精彩文章這永遠不會過時http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

來源

2012-10-23 11:43:43 AdityaSaxena

+0

除此之外：http://css-tricks.com/specifics-on-css-specificity/ – Rockbot

0

參考它最後一個項目中，總是會覆蓋之前的樣式表

下面將迫使你的頁面，以適應980px，因爲它覆蓋以前的樣式表屬性

例

Style1.css列表

#main{ width:1000px;}

Style2.css

#main{ width:980px;} 
     or 
#main{ width:980px !important;} /* if needed only */

HTML

<link href="style1.css" rel="stylesheet" type="text/css" /> 
<link href="style2.css" rel="stylesheet" type="text/css" /> 

<div id="main"></div>

來源

2012-10-23 11:43:55

-1

如果你與引導工作，這篇文章可能是有用的：

https://stackoverflow.com/a/12819825/1064416

來源

2012-10-23 12:05:44 Rockbot

1

我覺得你可以做的一件事是，包括在css.css中只有css.css和@import「css/bootstrap.min.css」，所以你的代碼將會是這樣的

中的HTML

<link href="css/css.css" rel="stylesheet">

和在css.css

@import "css/bootstrap.min.css" 

.bootstrap_class{//your style..} 
.hero-unit{background: red;}

使用這一招，你可以重寫引導的造型沒有任何顯示結果爲頭痛這個

來源

2012-10-23 12:11:57 Chandrakant

如何讓CSS文件比其他CSS文件更重要？

回答

相關問題