:focus と :active: それぞれをいつ使用する必要がありますか?

:focus vs :active: 違いを解明する

擬似クラス は CSS スタイル設定において重要な役割を果たし、スタイルを適用できるようにします。要素の状態またはユーザーとのインタラクションに基づきます。一般的に使用される 2 つの疑似クラスは、:focus と :active です。これらは機能が重複しているため、混乱を招くことがよくあります。

:focus について

:focus 疑似クラスは、次の要素を表します。通常はキーボードのナビゲーションまたはクリックを通じて、フォーカスを受け取りました。要素にフォーカスがあるときは、入力や操作などのユーザー入力を受け取る準備ができていることを示します。

:active について

:active 擬似クラスは、現在フォーカスされている要素を表します。ユーザーによってアクティブ化されています。これは、クリック、キーを押す、ドラッグなどのアクションによって発生する可能性があります。 :active 状態は通常、要素が操作されていることを示し、スタイルはアクションや視覚的な拡張を反映することがよくあります。

主な違い

:focus と :active は似ているように見えますが、主な違い:

• タイミング: :要素がフォーカスを受け取ったときにフォーカスが適用されます。 :active はアクティブなインタラクション中に適用されます。
• 目的: :focus は入力の準備ができている要素を示し、:active は使用中の要素を示します。
• 通常、一緒に使用されます: 要素をクリックすると、通常、:focus 状態と :active 状態の両方が発生します。

説明的な例

次のコードを考えてみましょう。

button {
  font-weight: normal;
  color: black;
}
button:focus {
  color: red;
}
button:active {
  font-weight: bold;
}

このスタイルでは、 が適用されます。最初は黒いテキストと通常の太さで表示されます。タブ操作によってフォーカスを受け取ると、テキストが赤に変わります。ただし、ボタンがクリックされる (アクティブになる) と、テキストは赤色のままで、ウェイトは太字になります。

この例では、:focus と :active を独立してまたは組み合わせて使用​​して、さまざまな状態で要素をスタイル設定する方法を示します。 。それらの違いを理解することで、ユーザー エクスペリエンスを向上させる正確で直感的なスタイルシートを作成できるようになります。

以上が:focus と :active: それぞれをいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。