Кнопка не изменит цвет (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. Я оставил идентификаторы, но они вам в действительности не нужны:

<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, но это, вероятно, не лучшее решение.

Наиболее надежным было бы, если родительский элемент также имеет идентификатор, тогда вы можете выбрать #parent-element>.blue-selected и получить более высокую специфичность.

Answer 3

Селектор ID имеет более высокий приоритет, чем селектор классов. Вы можете использовать important в коде css.