關於CSS規則優先級的一些問題

我有以下問題CSS：網站先導入一個名爲bootstrap.css（引導框架CSS設置）的CSS樣式文件，然後導入名爲我定製的另一個CSS文件-style.css重寫一些bootstrap.css設置（這樣我就可以離開創建不變bootstrap.css文件中的一些自定義設置）關於CSS規則優先級的一些問題

現在我有以下的情況，在引導。 css file我有這個屬性，我想重寫：

.img-thumbnail { 
    background-color: #FFFFFF; 
    border: 1px solid #DDDDDD; 
    border-radius: 4px; 
    display: inline-block; 
    height: auto; 
    line-height: 1.42857; 
    max-width: 100%; 
    padding: 4px; 
    transition: all 0.2s ease-in-out 0s; 
}

現在我要重寫它在我我，定製的style.css文件以這樣的方式使.IMG縮略圖對象沒有邊框。所以我delcare一個

.img-thumbnail { 

}

，我想對CSS來說，以下字段（** bootstrap.css設置好的）不得在overrided文件存在（所以我沒有邊界）

background-color: #FFFFFF; 
    border: 1px solid #DDDDDD; 
    border-radius: 4px; 
    height: auto;

我可以做這樣的事情還是讓我用特定的值覆蓋它？

我tryied與特定的值來覆蓋它，但我可以用一個新的顏色值覆蓋背景色（和它的工作），但是當我嘗試了邊境值仍然改變0像素它使用bootstrap.css定義

你能幫我解決這個問題嗎？我認爲存在着一種優雅的方式來簡單地說：「不不使用overrided文件設置明確地用新值

覆蓋它TNX

安德烈

來源

2014-02-05 AndreaNobili

border：0 none;不工作？編輯：！重要; – cox

爲了澄清，它應該是邊界：0或邊界：無 - 不是兩個。如果你同時使用它，它仍然可以工作，但那是因爲CSS使用了最後一個，而第一個是多餘的。這會對高流量網站的性能產生負面影響。如果您不得不重寫無法刪除的內聯樣式，那麼您應該只使用！important。這就是重要的原因，而不是像這樣的情況。 – PhillipKregg

基本上，CSS引擎將決定該規則來使用基於三件事情（按重要性排序列在這裏）：

!important條款
更具體的RUL Ë
規則順序

現在，check out this fiddle。

首先，我們來談談訂單。我們有：

div { background:green; }

和

div { background:gray; }

所以，CSS將要使用的背景是什麼？或gray？它們都是沒有!important條款的規則，並且具有相同的規格級別（均適用於div），只有訂單才能決定。在這種情況下，gray最後會出現，因此它將應用於所有div元素。

現在，規則的「特定性」。

#div1 { background: red; }

這個比僅適用於div元素其他規則更更具體規則。所以#div1即使稍後有div{ background: gray; }也會有紅色背景。

最後但並非最不重要!important。

這些規則是... 重要。他們只能被後面的另一個!important規則覆蓋，並且具有相同的特定級別。

即使!important規則在較低級別的規範中聲明，它也不會被覆蓋。像：

div { width:50px !important; } 
#div2 { border:3px solid blue; width: 100px; }

即使後來來了，是更具體的，width: 100px;不會被應用到#div2。

現在你知道了這一切，它檢查元素，看看會發生什麼，然後猜測的問題，你需要「多大的權力」，以覆蓋該規則。

來源

2014-02-06 00:35:21 cvsguimaraes

是的，只需在您自己的css文件中覆蓋該類，並在末尾添加！important重要

來源

2014-02-06 00:39:05 Gezzamondo

關於CSS規則優先級的一些問題

回答

相關問題