如何覆蓋引導程序？

下面的代碼在按鈕被選中時將按鈕文本變成深色。我假設這是來自嵌入在Bootstrap的btn類中的代碼。如何覆蓋代碼以在選擇按鈕後停止更改顏色的文本？如何覆蓋引導程序？

<html> 
<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<style> 
    .buttonColor{ 
    color:#ff0000; 
} 
.buttonColor:hover{ 
    color:#ffff00; 
} 
</style> 
</head> 
<body> 
    <button class="buttonColor btn" > Submit</button> 
</body> 
</html>

來源

2016-04-27 SimonRH

要更多***特定***在您的覆蓋樣式。 –

假設通過「選擇」你的意思是一鍵活躍狀態，你這是怎麼實現的呢：

.buttonColor:active { 
    color: #ffff00; 
}

來源

2016-04-27 15:11:29 Simone

這是一個共同的問題：How to overwrite styling in Twitter Bootstrap，best way to override bootstrap css，列表繼續。請致電CSS law of specifity。從本質上講，如果你在你的類聲明更具體的，可以覆蓋其他人的目標相同的元素：

在您的例子：

button.buttonColor.btn { 
    color: red; 
    padding: 50px; 
}

將覆蓋自舉的button.btn聲明。

同樣，添加僞選擇器來覆蓋其它狀態：

button.buttonColor.btn:active，button.buttonColor.btn:hover等

來源

2016-04-27 15:13:19

-1

引導同時使用:hover，:active和:focus僞類定位到具體的元件的狀態：

/* Example of Bootstrap :active styles for buttons */ 
.btn.active, .btn:active { 
    background-image: none; 
    outline: 0; 
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
}

以及：

/* Example of Bootstrap :focus and :hover styles for buttons */ 
.btn.focus, .btn:focus, .btn:hover { 
    color: #333; 
    text-decoration: none; 
}

所以你只需要使用自己的風格明確地覆蓋它們：

/* The more specific your selector (e.g. the more accurately it describes an */ 
/* element, the more likely a style will be applied. */ 
.btn.buttonColor:active, 
.btn.buttonColor.active, 
.btn.buttonColor:hover, 
.btn.buttonColor:focus { 
    color: #ffff00!important; 
}

，或者如果你想更具體的，你可以明確針對專門<button>元素：

button.btn.buttonColor:active, 
button.btn.buttonColor.active, 
button.btn.buttonColor:hover, 
button.btn.buttonColor:focus { 
    color: #ffff00!important; 
}

來源

2016-04-27 15:13:42

我試過了你的代碼，但它不起作用 – SimonRH

樣式中增加了一個額外的'.button'。我已經刪除它，試試看。你可以[在這裏使用你的代碼示例]（http://jsbin.com/nuvaho/edit?html,output）。 –

如何覆蓋引導程序？

回答

相關問題