:focus および :active 擬似クラスはいつ使用しますか?

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

:focus スタイル状態と :active スタイル状態はどちらもユーザー操作を通じてアクティブ化できますが、それらの機能は異なります

:focus

• 入力フォーカスを受け取り、ユーザー入力を受け入れる準備ができている要素を表します。
• 要素はタブなどのキーボード ナビゲーションを使用して選択されますkey.

:active

• ユーザーによってアクティブにクリックまたはタップされている要素を表します。
• 多くの場合、次のものが伴います。要素がフォーカスを受け取ったときのフォーカス状態click.

主な違い

• :focus は要素が入力用に選択されていることを示し、:active はクリックまたはタップ アクションを意味します
• :focus はキーボードベースの操作によってトリガーされますが、:active はマウスまたはタッチベースによってトリガーされます
• 要素がクリックされると、通常、:focus 状態と :active 状態の両方に遷移します。

例

次の HTML および CSS コード:

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

ボタンが最初にレンダリングされるとき、アクティブまたはフォーカス状態はありません。ユーザーが Tab を使用してフォーカスを与えると、:focus 状態になり、テキストが赤色に変わります。ユーザーがボタンをクリックすると、:active 状態になり、テキストが赤色で太字に変わります。

以上が:focus および :active 擬似クラスはいつ使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。