[解決済み】:focusと:activeの違いは何ですか？

質問

の違いは何ですか？ :focus と :active 擬似クラス？

どのように解決するのですか？

:focus と :active は2つの異なる状態です。

• :focus は、その要素が現在入力を受け取るために選択されているときの状態を表し
• :active は、その要素が現在ユーザーによって活性化されているときの状態を表します。

例えば <button> . その <button> は、そもそも状態を持ちません。ただ存在するだけです。もし タブ にフォーカスを当てます。 <button> に入ると、その :focus の状態になります。その後、クリック（または スペース ) に入ると、ボタンがその ( :active ) 状態にする。

そういえば、要素をクリックするとフォーカスが当たりますが、これも「？ :focus と :active は同じです。 同じではありません。 クリックすると、ボタンが :focus:active の状態になります。

一例です。

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

を編集します。 jsfiddle