2

CSS がブラウザーによってどのように、どのような順序で処理されるかを正確に理解しようとしています。CSS が右から左に読み取られることは既に知っていますが、より具体的には、次のことを知りたいです。

  1. ブラウザーは DOM 内の各要素を調べ、各要素について CSS ルールをスキャンして、一致するスタイルを見つけます...または、次の場合:
  2. ブラウザーは各 CSS ルールを調べ、セレクターごとに DOM をスキャンして、そのセレクターに一致する DOM 要素を見つけますか?

(あるいは、これはブラウザによって異なるのでしょうか?)

4

2 に答える 2

4

私の知る限り、これは CSS 標準では定義されていません。CSS 標準は結果のみを指定するものであり、結果に到達するための手段ではありません。どちらの「アルゴリズム」も同じ視覚的出力を提供するため、Web ページの動的な性質 (つまり、要素は Javascript によってほぼいつでも移動、追加、変更、または削除される可能性がある) も考慮に入れていると仮定すると、どちらも有効な実装である必要があります。これにより、一致する CSS ルールが変更されたり、他の要素が一致することさえ変更される可能性があります)。

これは実装に依存する必要があります。異なるブラウザーがすべて同じ方法で行う必要はありません。ただし、ブラウザ スペースでの競争は非常に激しいため、CSS ルールの設定によるパフォーマンスへの影響について心配する必要はありません。

于 2013-01-11T17:56:47.697 に答える
0

CSS処理階層について注意すべきことの1つは、CSSファイルにリンクするときです。

で呼び出されたスタイルシートは、linkより早くロードされます。

<link rel='stylesheet' type='text/css' href='foo.css'>

で呼び出されるスタイルシートよりも@import：

<style>
@import url('foo.css');
</style>

これは非常に単純な例ですが、要点はわかります。あなたはここでもっと多くを読むことができます：http：//www.stevesouders.com/blog/2009/04/09/dont-use-import/

于 2013-01-11T20:11:28.967 に答える