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

bodyタグへのスタイルの適用はページ全体に適用されるため、

body { font-family: Verdana }

ページ全体に適用されます。これは次の方法でも実行できます

* {font-family: Verdana} 

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

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

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

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

体

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

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

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

提案

1. フォント、色など、デフォルトで継承するスタイルプロパティにbodyを使用して、要素に適切なデフォルト値を提供し、すべてのケースで明示的にコーディングする必要性を減らし、bodyの下のレベルに含まれる要素の機能を維持します親から継承します。
2. この場合は、Universal Selector *を使用しない方がよいでしょう。ボディ内の他の要素間の継承を中断し、さらに補正するためにcssルールを記述するよう強制する場合があります。ページのレンダリングを遅くする要因になる可能性があります。これは、ページのサイズとコンテンツ、およびcssルールの数に依存します。

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

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

に対して

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

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

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

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

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

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

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

他にもいくつかの問題がありますが、繰り返しますが、すべてを思い出すわけではなく、何年も使用していません。

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

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

他の人が言及したように、親からもプロパティbody { font-family: Verdana }を継承する要素のみにフォントVerdenaを選択し、font-styleその親もすべてbody要素を最終的にプロパティを継承し、すべての要素に* {font-family: Verdana}フォントVerdenaを選択します。例で違いを説明したいと思います。

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

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ます。