引導按鈕活動和目標樣式不工作

我想要自定義我的助推器按鈕的顏色，包括在懸停狀態以及當用戶忙於單擊按鈕（按鈕）和用戶實際單擊按鈕後。我有青菜看起來是這樣的：引導按鈕活動和目標樣式不工作

// Button styling 
button.btn { 
    color: $white; 
    background-color: $lightOrange; 
    border-color: $darkOrange; 
} 
button.btn:hover { 
    color: $white; 
    background-color: $mediumOrange; 
    border-color: $darkOrange; 
} 
button.btn:active, button.btn:target { 
    color: $white; 
    background-color: $darkOrange; 
    border-color: $darkOrange; 
}

現在默認和懸停狀態工作的偉大，但是當用戶點擊鼠標按下按鈕則默認回到那個灰色是默認與引導。在按鈕被點擊後，它仍然是灰色，而不是我指定的$darkOrange。所以簡而言之，爲什麼不是:active和:target工作？

來源

2015-09-10 Tiwaz89

不是你的問題的答案，但你真的不應該將變量命名爲$白色，$橙色等。將它們命名爲$ primary，$ secondary等。 – Chrillewoodz

這真的是最佳實踐嗎？嗯..給顏色命名似乎對我來說更直觀一些。我會給你一個建議，看看它在未來的項目中是如何運作的。謝謝:) – Tiwaz89

嘗試添加'！important'。 –

你應該有一個在這裏閱讀：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

基本上你需要確保你給你的風格不是引導的方式更高的特異性，而無需使用!important。

您面臨的問題是，您使用button.btn而不僅僅是.btn。由於button是一個全局選擇器，它比一個類的特殊性要低，Bootstrap的樣式仍然會統治相同元素的自定義樣式。即使您的文件包含在Bootstrap之後。

爲了解決這個問題只需將代碼改成這樣：

.btn { 
    color: $white; 
    background-color: $lightOrange; 
    border-color: $darkOrange; 
} 
.btn:hover { 
    color: $white; 
    background-color: $mediumOrange; 
    border-color: $darkOrange; 
} 
.btn:active, 
.btn:target { 
    color: $white; 
    background-color: $darkOrange; 
    border-color: $darkOrange; 
}

來源

2015-09-10 07:39:45 Chrillewoodz

當你的目標引導元素始終牢記跟隨並覆蓋所有可能的組合。

並在你的情況下，你的目標是引導button s，這顯然有各種組合。重寫它們並不意味着你必須使用!important它只是你正確使用正確的selector。

正如你所定義.btn:active但button可以在相同的點即.btn:active:focus是:active以及:focus。所以，如果要覆蓋其:active狀態，那麼你已經找各個方面：

button.btn:active, 
button.btn:focus, 
button.btn:target, 
button.btn:active:focus { ... /*write your CSS here */ }

在這裏，我已經創建了一個JSFiddle還請大家看看。

希望它能幫助您解決您的疑問，並清除您對!important的疑問。

來源

2015-09-10 07:50:15 vivekkupadhyay

引導按鈕活動和目標樣式不工作

回答

相關問題