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

这是工作现场演示。

Answer 3

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

#koolbutton .active

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

#koolbutton.active

尽管由于CSS 特定性规则，选择器的顺序并不重要，但在创建更易于维护的 CSS 方面，我建议您首先放置默认样式，然后是该样式的任何变体：

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

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