html - CSSで2つの異なる状態を与える方法は?

Question

たとえば、cssに2つの異なる状態があるcssにこの問題があります

#koolbutton .active {

   color: #fff

}

#koolbutton{

  color: #ccc   //not active

}

このhtmlを試すと

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

白のアクティブなボタンではなく、通常のグレーのクールボタンが表示されます。ありがとう

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 とクラス セレクターの間にスペースがあるため、これは のクラスを持つすべての要素とactiveの id を持つ祖先に適用されkoolbuttonます。あなたが望むのは、クラスactive とIDを持つすべての要素を選択することですkoolbutton：

#koolbutton.active

セレクターの順序はCSS 固有性ルールにより重要ではありませんが、より保守しやすい CSS を作成するという観点から、デフォルト スタイルを最初に配置し、その後にそのスタイルのバリエーションを配置することをお勧めします。

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

アクティブ/フォーカス状態を本当にスタイルしたい場合は、おそらく:focusおよび:active疑似セレクターを確認する必要があります。