CSSの検索マッチング原理を理解し、CSSをより簡潔で効率的にする。
簡単なCSSを見てください。DIV＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿、このCSSに対しての習慣では、ブラウザはまずidをdivBoxのDIV元素として検索し、見つけたらその下のp元素を全部探して、更にspan元素を調べて、spanのclassがredであることを発見したら、このスタイルを適用します。どんなに簡単で分かりやすい原理なのに、この理解は全く逆で、間違っています。整合原理：ブラウザCSSマッチングは、左から右に検索するのではなく、右から左に検索するのです。例えば前に言ったDIV＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿、ブラウザの検索順序は以下の通りです。まず、これまでのclass='red'のspan要素を探してみます。見つけたら、父の世代要素の中にp元素があるかどうかを調べて、pの父の要素の中にdivBoxのdiv元素があるかどうかを判断します。全部存在すればマッチします。右から左へ検索するブラウザの利点は、関係のないスタイルや要素を早くフィルタするためです。例えば、css：
<style>
DIV#divBox p span.red{color:red;}
<style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>