如何在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*/ }

Answer 2

你也可以试试这个;

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

Here 是现场演示。

Answer 3

问题在于您的第一个选择器：

#koolbutton .active

由于id和类选择器之间有空格，因此这适用于类active的每个元素和id为koolbutton的祖先。你想要的是选择active 和类koolbutton的每个元素：

#koolbutton.active

虽然选择器的顺序与CSS Specificity rules无关，但在创建更易维护的CSS方面，我建议您首先使用默认样式，然后是该样式的任何变体：

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

如果您真的想要设置活动/焦点状态的样式，您应该查看:focus和:active伪选择器。