web-dev-qa-db-ja.com

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>
csscss-selectors
93
JasonDavis

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

92
Soviut

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

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

29
Tom

*はワイルドカードです。つまり、スタイルを任意のHTML要素に適用します。追加の*は、対応するレベルのネストにスタイルを適用します。

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

4
futureelite7

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

もしあなたがそうするなら：

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

次に、all HTML要素にこれらのスタイルが設定されます。

4
Mike Trpcic

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

0
Mikel bradley benjamin