1

基本的なボタンスタイルを作成しました。ブルーバージョンとグレーバージョンが欲しいです。青いクラスセレクターと灰色のクラスセレクターは認識されません。

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>
4

1 に答える 1

6

この行を変更します。

a.checkout-button .gray {

これに：

a.checkout-button.gray {

そして、この行を変更します。

.a.checkout-button .blue {

これに：

a.checkout-button.blue {

編集：これの理由は、正しいcss形式は、クラスを.間に挟んで文字列化することであるためです。次のようにスペースを残すと、要素内にクラスを持つすべてのa.checkout-button .gray要素にスタイルが適用されます。graya.checkout-button

于 2012-06-09T02:24:04.860 に答える