如何防止引導CSS類來覆蓋我的自定義CSS類

Question

我有一些文本框在我的形式有引導form-control類。

media="screen" 
.form-control { 
    ... 
    border: 1px solid #ccc; 
    ... 
} 

正如你所看到的，這個類定義了這些文本框的邊界。當其中一個文本框的內容無效時，使用jQuery，我添加一個名爲form-error的自定義類，該類改變了此文本框的邊框。

.form-error { 
    border: 2px solid red; 
} 

但是，我的班級被form-control級別所覆蓋。我不知道爲什麼，但可能是因爲媒體查詢（開發人員工具在form-control類之上顯示media="screen"）。

我怎樣才能讓我的form-error類覆蓋form-control類？

Answer 1

如果這是特異性的問題，你能更具體，使用這樣的：

form .form-group .form-error { 
    border: 2px solid red; 
} 

jsFiddle example

記住，樣式進行級聯。這意味着他們從上到下閱讀。您應該將.form-error的樣式放置在.form-control以下，以防止它被覆蓋。

Answer 2

另一種選擇是添加「！重要」的風格。請檢查。

例如。 。

form-error { 
    border: 2px solid red !important; 
}