按钮不会改变颜色（HTML5）

Question

我有三个按钮，就像单选按钮一样 - 一次只能选择一个

<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>

对于正常的未选定状态，所有按钮都使用渐变背景：

#btn-bronze
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    width: 33%;
    height: 100%;
}

#btn-silver
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    width: 33%;
    height: 100%;
}

#btn-gold
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    width: 33%;
    height: 100%;
}

选择后，所选按钮应添加此类以修改背景颜色：

.blue-selected
{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}

这是在正文加载时调用的方法中使用jQuery完成的：

$("#btn-bronze").click(function() 
{

    console.log("bronze");
    $(this).addClass('blue-selected');
    $("#btn-silver").removeClass('blue-selected');
    $("#btn-gold").removeClass('blue-selected');
});

$("#btn-silver").click(function() 
{
    console.log("silver");
    $("#btn-broze").removeClass('blue-selected');
    $(this).addClass('blue-selected');
    $("#btn-gold").removeClass('blue-selected');
});

$("#btn-gold").click(function() 
{
    console.log("gold");
    $("#btn-broze").removeClass('blue-selected');
    $("#btn-silver").removeClass('blue-selected');
    $(this).addClass('blue-selected');
});

单击其中一个按钮时，将显示控制台日志消息，但背景颜色保持不变。我究竟做错了什么？的 Here is the fiddle

Answer 1

我会修复一些事情。

使用类而不是ID定位。我留下了ID，但你现在并不需要它们：

<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button>
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>

然后我会使用这些样式。这样我可以在不创建新样式的情况下添加更多按钮：

 .btn
 {
   float: left;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
   width: 33%;
   height: 100%;
}

.btn:first-child {
   -webkit-border-top-left-radius: 6px;
   -webkit-border-bottom-left-radius: 6px;
}

.btn:last-child {
   -webkit-border-top-right-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
}

.btn.blue-selected
{
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));
}

最后，我会简化javascript中的地狱：

$(".btn").click(function () {
    $(".btn").removeClass("blue-selected");
    $(this).addClass('blue-selected');
});

http://jsfiddle.net/4ZygH/1/

Answer 2

#btn-bronze的特异性高于.blue-selected，因此其背景优先。

您可以使用!important解决此问题，但这可能不是最佳解决方案。

最可靠的是，如果父元素也有ID，那么您可以选择#parent-element>.blue-selected并获得更高的特异性。

Answer 3

ID选择器的优先级高于类选择器。您可以在css代码中使用important。