CSS の検索とマッチングの原理を理解して、CSS をより簡潔かつ効率的にする_エクスペリエンス交換

単純な CSS を見てください:

DIV#divBox p span.red{color:red;}。習慣によれば、この CSS についての私たちの理解では、ブラウザは最初に divBox の ID を持つ DIV 要素を検索します。見つかったらその配下のp要素をすべて検索し、さらにspan要素をすべて検索し、spanのクラスがredであることがわかったらスタイルを適用します。シンプルでわかりやすい原理ですが、この理解は全く逆であり、間違っています。


マッチングの原則:

ブラウザの CSS マッチングでは、左から右ではなく、右から左に検索されます。たとえば、前述の DIV#divBox p span.red{color:red;} の場合、ブラウザの検索順序は次のとおりです。

まず、html 内の class='red' を持つすべての span 要素を検索します。親要素にp要素があるかどうかを確認し、pの親要素にdivBoxというIDのdiv要素があるかどうかを確認し、両方存在すれば一致します。

ブラウザで右から左に検索する利点は、無関係なスタイル ルールと要素をできるだけ早く除外できることです。たとえば、次の HTML と CSS:

コードをコピー コードは次のとおりです。