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 串在一起.。如果你留下一个空格，像这样: a.checkout-button .gray，这会将样式应用于任何具有grayINSIDE 元素的类的a.checkout-button元素。

于 2012-06-09T02:24:04.860 回答