了解CSS的查找匹配原理，让CSS更简洁、高效
程序员文章站
2022-05-28 18:31:58
看1个简单的css： div#divbox p span.red{color:red;}，按习惯我们对这个css 的理解是，浏览器先查找id为divbox的div元素，当找...
看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>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简洁、高效的css:
所谓高效的css就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写css犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：
1.不要在id选择器前使用标签名
一般写法：div#divbox
更好写法：#divbox
解释： 因为id选择器是唯一的，加上div反而增加不必要的匹配。
2.不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3.尽量少使用层级关系
一般写法：#divbox p .red{color:red;}
更好写法：.red{..}
4.使用class代替层级关系
一般写法：#divbox ul li a{display:block;}
更好写法：.block{display:block;}
ps：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考
mozilla firefox：https://developer.mozilla.org/en/writing_efficient_css
google page-speed：http://code.google.com/intl/zh-cn/speed/page-speed/docs/rendering.html
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>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简洁、高效的css:
所谓高效的css就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写css犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：
1.不要在id选择器前使用标签名
一般写法：div#divbox
更好写法：#divbox
解释： 因为id选择器是唯一的，加上div反而增加不必要的匹配。
2.不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3.尽量少使用层级关系
一般写法：#divbox p .red{color:red;}
更好写法：.red{..}
4.使用class代替层级关系
一般写法：#divbox ul li a{display:block;}
更好写法：.block{display:block;}
ps：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考
mozilla firefox：https://developer.mozilla.org/en/writing_efficient_css
google page-speed：http://code.google.com/intl/zh-cn/speed/page-speed/docs/rendering.html
下一篇： 网站性能优化之HTTP请求过程简述