如何在CSS中给出两种不同的状态？

Question

我在css中有这个问题,例如我在css中有两种不同的状态

#koolbutton .active {

   color: #fff

}

#koolbutton{

  color: #ccc   //not active

}

当我尝试这个HTML

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

它给了我正常的灰色koolbutton而不是活跃的白色!谢谢

Answer 1

您需要忽略之间的空间#koolbutton和.active.

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