CSS にはフォーカスを失う要素をスタイリングするための :blur セレクターがありますか?

CSS のフォーカスとブラーの状態: :blur Selector の可用性

CSS では、:focus 疑似クラスを使用してスタイルを適用できます。入力フィールドやボタンなど、フォーカスされている要素に移動します。しかし、多くの人は、フォーカスを失った要素に対応する :blur 擬似クラスが CSS にあるのではないかと疑問に思うかもしれません。

答えは、CSS には :blur 擬似クラスは存在しないです。

CSS では、:focus を含む疑似クラスは要素の現在の状態を表します。 :focus 疑似クラスは要素のフォーカス状態を示しますが、フォーカスを失いつつある要素、またはフォーカスを失った要素のスタイルを明示的に定義する方法はありません。

この制限は、CSS の表現方法と一致しています。イベントではなく状態。 :focus、:hover、:active などの疑似クラスは、状態間の遷移に基づいてスタイルをトリガーするように設計されていません。代わりに、要素が現在ある特定の状態を表します。

フォーカスされていない要素のスタイルを設定するには、次のような CSS テクニックを使用できます。

• :not(:focus) を使用する: このアプローチでは、フォーカスを持たない要素をターゲットにできますが、ブラウザーの負荷は少なくなります。 support.
• :focus によるスタイルのオーバーライド: すべての要素の一般的なスタイルを定義し、フォーカスのある要素の特定のスタイルでそれらをオーバーライドできます。

以上がCSS にはフォーカスを失う要素をスタイリングするための :blur セレクターがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。