ユニバーサル セレクターと擬似要素

ユニバーサル セレクター (*) は、ドキュメント内のすべての要素を対象とします。ただし、:before や :after のような疑似要素には直接影響しません。

疑似要素は、仮想ノードを表す DOM の抽象化です。これらは実際の要素ではないため、*.

のような単純なセレクターの対象にすることはできません。疑似要素にスタイルを適用するには、、 などの疑似要素をセレクターに明示的に含める必要があります。 before, *:after.

これは、宣言 * { box-sizing: border-box; を意味します。

代わりに、:before, :after { box-sizing: border-box; } を宣言する必要があります。

一部の開発者は * { box-sizing: border-box; だけを使用する場合があります。通常、疑似要素はインラインで表示されるため、問題が発生することはありません。ボックスのサイズ変更はインライン要素に影響を与えないため、ユニバーサル セレクターを単独で使用しても、疑似要素に顕著な影響を与えることはありません。

:before、:after は疑似要素に影響を与えることに注意することが重要です。 html、head、body を含むすべての要素のうち、これらの疑似要素は content プロパティを適用するまで生成されません。この動作に関連するパフォーマンスの問題はありません。