51合肥家教网以“让孩子自信、让家长放心”为服务宗旨,以“证件认证、星级评定”保证教员质量,以“系统化、高质量、快节奏”为服务理念,提供 安庆英语家教, 安庆数学家教, 安庆物理家教, 安庆化学家教, 安庆理科家教, 安庆文科家教, 安庆奥数家教, 安庆数理化家教, 安庆日语家教, 安庆全科家教等一对一上门家教服务。本 安庆家教中心地址:51安庆家教网,电话:15215533456
51安庆家教网
家教热线:
安庆请家教电话 15215533456
安庆做家教加群 Q群965013365
安庆请家教  安庆做家教  安庆家教信息  安庆老师信息      
    【新闻资讯】     【休闲一看】     【家庭关系】     【成长宝典】     【外语趣味阅读】
  当前位置:【51安庆家教网】 → 首页家教资讯 → 浏览文章

采编:哈尔滨家教网   来源:哈尔滨家教网    点击:1198    发布日期:2010-07-07 20:21:23

了解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选择器前使用标签名
一般写法: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

您可能感兴趣的文章:
WEB高性能开发之疯狂的HTML压缩
web高性能开发系列随笔 BearRui(AK-47)版
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
高性能WEB开发 页面呈现、重绘、回流。
高性能WEB开发 JS、CSS的合并、压缩、缓存管理
高性能WEB开发(5) 减少请求,响应的数据量
高性能WEB开发 为什么要减少请求数,如何减少请求数!
高性能web开发 如何加载JS,JS应该放在什么位置?
高性能WEB开发 图片压缩篇
高性能WEB开发 web性能测试工具推荐
高性能WEB开发 nginx HTTP服务器篇
编写高性能的JavaScript 脚本的加载与执行

 


------文章版权归原作者所有, 未经允许请勿转载, 如有任何问题请联系我们。

安庆大学家教中心 |最新学员 |优秀教员 |收费标准 |学员常见问题 |新闻信息 |教员常见问题 |教员须知 |本站简介
服务热线电话:15215533456  我们的QQ客服:702138520 教员加QQ群965013365(点击即可聊天)
©    版权所有 国家工信部备案许可证:皖ICP备2022011460号-1 未经允许 不得转载  本站地图 电子邮箱:702138520@qq.com
网络实名:安庆家教 安庆大学家教网  安庆家教安庆家教网
本站搜索关键词:安庆家教 安庆数学家教 安庆英语家教 安庆物理家教 安庆化学家教 安庆语文家教