Как дать два разных состояния в css?

Question

У меня эта проблема в CSS, где у меня есть два различных состояния в CSS, например

#koolbutton .active { 

    color: #fff 

} 

#koolbutton{ 

    color: #ccc //not active 

} 

Когда я попробовать этот HTML

<button id ="koolbutton" class="active"> 

Это дает мне нормальный серый koolbutton не активный тот, который белый! thanks

Answer 1

Необходимо опустить пробел между #koolbutton и .active.

#koolbutton { /*not active*/ } 
#koolbutton.active { /*active*/ } 

Answer 2

Вы также можете попробовать этот вариант;

#koolbutton:active { 
    color: #fff; //when user click the button 
} 
#koolbutton{ 
    color: #ccc; //normal display of button 
} 

Here это работает Демо.

Answer 3

Проблемы с вашим первым селектором:

#koolbutton .active 

Поскольку существует пространство между селектором и классом, это относится к каждому элементу с классом active и предком с идентификатором koolbutton. Что вы хотите, чтобы выбрать все элементы с классом activeи ИД koolbutton:

#koolbutton.active 

Хотя порядок ваших селекторов не имеет значения из-за CSS Specificity rules, с точки зрения создания более ремонтопригодны CSS I рекомендовал бы вам поместить стили по умолчанию первый, а затем с помощью любых изменений в этом стиле:

#koolbutton { /* default styles */ } 
#koolbutton.active { /* .active styles */ } 
#koolbutton.foo { /* Another class styles */ } 

Если вы действительно желающей стиль активных/FOCUS состояния, вероятно, вы должны смотреть на :focus и :active pseu делать селектора.