如何使用按鈕顏色的css繼承

我已經創建了一個基本的按鈕樣式。我想要一個藍色版本和一個灰色版本。藍色類別選擇器和灰色類別選擇器從未被識別，爲什麼不？如何使用按鈕顏色的css繼承

a.checkout-button { 
    -webkit-transition:border-color 0.218s; 
    background-position: initial initial; 
    background-repeat: initial initial; 
    border:0 solid #DCDCDC; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    color: #EEEEEE; 
    display: inline-block; 
    font-family: 'Arimo', Arial, sans-serif; 
    font-size: 16px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: normal; 
    margin-right: 10px; 
    padding: 4px 12px; 
    position: relative; 
    text-decoration: none; 
    text-shadow: #FFFFFF 0 0 0; 
    text-transform: uppercase; 
} 
a.checkout-button .blue { 
    background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020)); 
    background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020)); 
} 
a.checkout-button .gray { 
    background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020)); 
    background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020)); 
}

和HTML

<a class="checkout-button gray" id="cancel-btn" href="">Cancel</a> 
<a class="checkout-button blue" id="express-checkout-btn" href="">Express Checkout</a>

來源

2012-06-09 Daven Nolta

這個問題與繼承無關。 –

嗨達文，歡迎來到SO！作爲你的問題中的代碼片段的補充，我建議使用[jsfiddle]（http://jsfiddle.net）來顯示你的代碼。 jsfiddle可以幫助識別問題並使問題更容易回答。 –

Rob d'Apice的解決方案示例http://jsfiddle.net/BZRL6/2/ –

改變這一行：

a.checkout-button .gray {

這樣：

a.checkout-button.gray {

而改變這一行：

.a.checkout-button .blue {

要這樣：

a.checkout-button.blue {

編輯：這樣做的原因是，正確的CSS格式串類與之間的.在一起。如果您留下空間，如下所示：a.checkout-button .gray，這會將樣式應用於具有類gray中的類a.checkout-button元素的任何元素。

來源

2012-06-09 02:24:04

正是我即將發佈的，很好的答案。 –

感謝，對於解決方案和空間之間的區別和沒有空間。現在完美工作。 –

沒問題！如果你認爲這是正確的，你應該接受這個答案。 –

如何使用按鈕顏色的css繼承

回答

相關問題