CSS の :focus 疑似クラスと :active 疑似クラスの違いは何ですか?

:focus 疑似クラスと :active 疑似クラスの区別

を使用する場合、:focus 状態と :active 状態の違いを理解することが重要です。 CSS。これらの疑似クラスは、HTML 要素と対話するときに作用する個別の要素の状態を表します。

:focus とは何ですか?

:focus 状態は、要素が入力フォーカスを受け取りました。この状態は通常、要素がキーボード入力を受け取ったとき、またはユーザーが他のフォーカス可能なメカニズムを使用して要素を選択したときにトリガーされます。フォーム要素 (:input、:button、:a)、frame/:iframe などの要素は、このように動作します。

:active とは?

:active 状態ユーザーによって現在アクティブ化されている要素を表します。この状態は、ユーザーがボタンをクリックしたりキーを押したときなど、対話型のシナリオでよく見られます。たとえば、ボタンは通常、クリックされると :active 状態になり、放されます。

:focus と :active を区別する方法

要素がclicked、:focus、および :active は別個の状態です。ユーザーが要素をクリックすると、要素はフォーカスとアクティブ化の両方を受け取り、結果として :focus:active 状態になります。ただし、これらの状態は独立してトリガーできます。たとえば、要素をアクティブ化せずに (タブを使用するなど) フォーカスすることも、その逆も可能です。

例

次の HTML および CSS コードを考えてみましょう。

<style>
  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>

ボタンをクリックせずに（タブを使用して）ボタンにフォーカスすると、テキストが赤くなるだけです。ボタンをクリックすると、テキストが赤太字に変わり、ボタンがフォーカスされてアクティブになっていることを示します。

以上がCSS の :focus 疑似クラスと :active 疑似クラスの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。