日期:2014-05-17  浏览次数:20580 次

了解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>
如果按从左到右查找,哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找,则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的key就是span.red。

简洁、高效的CSS:
?? ? ?所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误,还老以为这样写才是高效的):
???
? 1.不要在ID选择器前使用标签名
?一般写法:DIV#divBox
?更好写法:#divBox
?解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。
??
??2.不要再class选择器前使用标签名
友情链接: 爱易网 云虚拟主机技术 云服务器技术 程序设计技术 开发网站 APP开发教程
Copyright © 2013-2024 爱易网页 当前在线:489人  网站在2时6分34秒内访问总人数:25272人 当前 36.39%  粤ICP备18100884号-2