web-dev-qa-db-ja.com

css-htmlまたはbodyセレクタではなく、ユニバーサル「*」セレクタを使用しますか？

Bodyタグにスタイルを適用すると、ページ全体に適用されるため、

body { font-family: Verdana }

ページ全体に適用されます。これは、

* {font-family: Verdana}

これはすべての要素に適用されるため、同じ効果があるように見えます。

最初の例ではスタイルがページ全体の1つのタグ、本文に適用されるのに対し、2番目の例ではフォントが個々のhtml要素に対して適用されるという原則を理解しています。私が求めているのは、それを行うことの実際的な違いは何か、意味は何か、そして相互に使用する理由、状況、またはベストプラクティスは何か、ということです。

1つの副作用は確かに速度です（+1ロブ）。機能の面でどちらか一方を選択する実際の理由に最も興味があります。

design-patternscoding-stylehtmlcss
11
Michael Durrant

CSSセレクターのこれら2つの選択の機能的な違い...（私の見解）

ボディ

  • Bodyプロパティにスタイルプロパティを適用します。
  • Body内の要素はプロパティ値を継承する場合があります。一部のプロパティはデフォルトで「継承」します。
  • 本文内の要素に一致するスタイル宣言は、継承されたスタイルをオーバーライドできます。

ユニバーサルセレクタ*（すべての要素）

  • すべての個々の要素にスタイルプロパティを適用します。
  • 継承されたスタイルプロパティとデフォルトの「初期値」を置き換えます。継承をブロックします。
  • 要素に一致するその他のより具体的なCSSセレクターは、*によって適用されるスタイルプロパティを置き換えます。

提案

  1. フォント、色など、デフォルトで継承するスタイルプロパティにボディを使用して、要素に適切なデフォルト値を提供し、すべてのケースに対して明示的にコーディングする必要を減らし、ボディの下のレベルに含まれる要素の機能を維持します。彼らの両親から継承します。
  2. この場合は、ユニバーサルセレクタ*を使用しないほうがよいでしょう。本体内の他の要素間の継承を中断し、補正するためにさらに多くのcssルールを作成するように強制する場合があります。これは、ページのレンダリングを遅くする要因になる可能性があります。これは、ページのサイズとコンテンツ、およびCSSルールの数によって異なります。
6
joshp

このようなものを試してください

body { font-family: Verdana }
table { font-family: Arial }

に対して

* { font-family: Verdana }
table { font-family: Arial }

そして、どのスタイルがテーブルのセルに適用されているかを確認します。

cascadingスタイルシートを扱っている場合、「ドキュメント全体に適用」と「ドキュメントのすべての要素に適用」には違いがあります。

カスケードスタイルを本文に適用すると、タグで上書きされるまで、本文内のすべてのタグに適用されます。次に、上書きされたスタイルがそのタグ内のすべてのタグに適用されます。

ただし、マージンやパディング（通常は意味をなさない場所）など、カスケードされないいくつかのスタイルがあります。これらは特定のタグにのみ適用でき、ワイルドカードが役立つ場合があります（まれですが）。

ほとんどの非カスケードスタイルも、継承の値を持っています（例：margin: inherit）は、「親タグの値を取る」ことを意味します。

10
pdr

完全な詳細を忘れましたが、*セレクターを使用すると、ブラウザーがCSSを解析してスタイルを適用するときにすべての要素が評価されるため、パフォーマンスが低下します。 iirc、この場合、親のみにフォントを設定すると、要素ごとに1つの参照が作成され、追加の作業は必要ありません。

他にもいくつか問題がありますが、繰り返しますが、すべてを思い出すことはできず、何年も*使用していません。

3
Rob

他の人が述べたように、body { font-family: Verdana }は、すべての親が最終的にプロパティのフォームを継承するように、親からfont-styleプロパティinheritである要素のみにフォントVerdenaを選択しますbody要素、および* {font-family: Verdana}は、フォントVerdenaをall要素に選択します。違いを例で説明します：

ボディセレクターを使用：

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

ユニバーサルselelctorを使用*：

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

<input>要素はフォントスタイルをまったく継承しないため、フォームに入力したものはすべて、ユーザーエージェントスタイルシートのデフォルトのフォントスタイルを取得するので、サンプルのcssおよびhtmlコードを使用してください。 。 2番目の例では、ユニバーサルセレクター*は、input要素を含むすべての要素のフォントスタイルを明示的に設定します。

1
user106313

優れたCSS設計の一般的なガイドラインは、できるだけ具体的にすることですが、それ以上ではありません。

したがって、あなたの例では、スタイルをbody要素に適用することはできるだけ具体的であり、「*」セレクターよりも確かに具体的です。

1
Dibbeke