CSSセレクターでアスタリスク（*）は何をしますか？

私はこのCSSコードを見つけて実行し、ページのすべての要素の概要を示しました。

誰かがCSSでアスタリスク*が何をしているのか説明できますか？

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>

これはワイルドカードです。つまり、DOMのその部分内のすべての要素を選択します。

たとえば、ページ全体のすべての要素にマージンを適用したい場合は、以下を使用できます。

* {
    margin: 10px;
}

これをサブ選択内で使用することもできます。たとえば、次のようにすると、段落タグ内のすべての要素にマージンが追加されます。

p * {
    margin: 10px;
}

あなたの例は、複数の色付きの境界線を与えるために要素に連続した境界線とマージンを適用するためにいくつかのcssトリックをしています。たとえば、黒い境界線で囲まれた白い境界線。

参照したCSSは、Webデザイナーがページレイアウトの問題をデバッグするのに非常に役立ちます。一時的にページにドロップすることが多いので、すべてのページ要素のサイズを確認して追跡できます。たとえば、余白が多すぎて他の要素が適切に配置されていないなどです。

最初の行だけでも同じトリックを実行できますが、複数のアウトラインを定義する利点は、入れ子になったページ要素の階層に境界線の色を介して視覚的な手掛かりが得られることです。

*はワイルドカードです。これは、スタイルをHTML要素に適用するという意味です。追加の*は、対応するネストのレベルにスタイルを適用します。

このセレクターは、要素のネストレベルに応じて、ページのすべての要素に異なる色のアウトラインを適用します。

* 他のほとんどのインスタンスと同様に、ワイルドカードとして機能します。

もし、するなら：

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

そうすると、すべての HTML要素がそれらのスタイルになります。

スタイルシートでは、通常、font-size属性やマージンなどのすべての要素に基本的なルールを定義する必要があります。 {font-size：14px; マージン：0; padding：0;} /要素のブラウザのデフォルト設定を上書きすると、すべてのテキストのフォントサイズは、h1、... preを含め、マージンとパディングがゼロの14ピクセルサイズとしてレンダリングされます。* /