注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

背归鸿

博闻强记,厚积薄发!

 
 
 

日志

 
 

了解CSS的查找匹配原理 让CSS更简洁  

2012-02-09 20:32:01|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用了这么多年的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元素。而如果按从右到左的方式进行查找,则首先就查找到的元素。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;}

  评论这张
 
阅读(287)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018