理解CSS的查找匹配原理，让CSS更简洁、高效
日期：2014-05-17 浏览次数：20688 次
了解CSS的查找匹配原理，让CSS更简洁、高效
用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？看1个简单的CSS：
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS?的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
匹配原理：
?? ??浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
?? ?浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和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>
?? 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>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简洁、高效的CSS:
?? ? ?所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：
???
? 1.不要在ID选择器前使用标签名
?一般写法：DIV#divBox
?更好写法：#divBox
?解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。
??
??2.不要再class选择器前使用标签名
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
