如何在css中給出兩種不同的狀態？

Question

我在CSS這個問題在那裏我有兩個不同的狀態在CSS例如

#koolbutton .active { 

    color: #fff 

} 

#koolbutton{ 

    color: #ccc //not active 

} 

當我嘗試這個網站

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

它給我的正常灰色koolbutton未處於活動狀態，其是白色的！謝謝

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 

由於是id和class選擇器之間的空間，這也適用於每一個元素與類的active和祖先的ID koolbutton。你想要的是一個koolbutton的ID與類active和選擇的每一個元素：

#koolbutton.active 

雖然你選擇的順序並不重要，由於CSS Specificity rules，創造更易於維護的CSS我而言建議你把默認樣式第一，其次是任何變化，這些變化風格：

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

如果你真的想要的風格活躍/聚焦狀態，你應該看看:focus和:active假性做選擇器。