ユニバーサル セレクター (*) は、:before や :after などの疑似要素に影響しますか?

ユニバーサル セレクター (*) と疑似要素 (:before、:after)

ユニバーサル セレクター (*) はその影響を拡張しますか:before や :after のような疑似要素に?たとえば、次を使用する場合:

* { box-sizing: border-box; }

自動的に疑似要素に影響しますか、それとも明示的に宣言する必要がありますか:

*, *:before, *:after { box-sizing: border-box; }

直感に反して、ユニバーサル セレクターは直接影響しません。疑似要素 (間接継承を除く)。これは、:before と :after が実際の要素とは別のエンティティであり、抽象化によって表されるためです。

* のような単純なセレクターは、疑似要素ではなく実際の要素のみをターゲットにできます。 :before と :after のスタイルを設定するには、それらをセレクターに明示的に含める必要があります。

* のみを使用しても問題が発生しなかった理由は、擬似要素がデフォルトでインライン表示になっているためである可能性があり、これは影響を受けません。

複数の単純なセレクターを使用する場合、明確にするために * を含めることはオプションであることに注意してください。さらに、現在のセレクターの仕様では疑似要素を示すために二重コロンを使用しますが、古いブラウザではボックス サイズのリセットに単一コロンの表記がサポートされています。

:before ですが、:after はスタイルを適用します。すべての要素の擬似要素は、content プロパティを宣言するまで生成されません。これによりパフォーマンスの問題が生じることはありません。

以上がユニバーサル セレクター (*) は、:before や :after などの疑似要素に影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。