致力于青岛网站建设、青岛搜索优化、青岛网站设计、青岛SEO的专业开发团队!
当前位置:主页 > 网站建设 > CSS >

使用高效的CSS选择器

www.elingxi.com  2011-02-23 09:15

 青岛网站建设曾经提到过一次这个问题,那就是高性能网站建设的问题。想要写出高性能的代码,那首先就要有一个执行高效的CSS选择器,那如何才能遵循这个规则,今天来翻译一篇国外的文章,其实在《高性能网站建设指南》一书中也有提出,这里是换个说法,举个例子而已。下面具体看原文。

使用层级样式表是不正确的选择,但是当你的的层级样式表最右侧的选择器为ID的时候,会更加的糟糕。看下面的例子

 

#nav li ul li a#active {...}

你的浏览器解析这个样式的时候是从右到左的。

规则按照下面的顺序解析。

首先检查 : #nav li ul li a#active

当它找到ID为#active的元素时。第二步就是

 #nav li ul li a#active

找到了上面的元素之后,浏览器继续搜索

 #nav li ul li a#active

直到最后,浏览器简直被你雷人的行为给打崩溃了,它终于明白了你要说的 就是把ID为active的元素执行该样式,但是你却让浏览器绕了一个天大的弯才完成的。

而上面的样式,完全可以写成#active{} 这样浏览器直接锁定ID为active的元素,不会继续执行和寻找它的父级标签来。

现在明白高效CSS的重要性了吧,可以让浏览器少做多少功,少绕多少弯啊!!

文中部分内容译自:http://www.css-101.org/descendant-selector/go_fetch_yourself.php

 

本文原载: 青岛网站建设 - 青岛SEO [http://www.elingxi.com/]
本文永久链接: http://www.elingxi.com/css/022315R011.html

==华丽的分割线==

您可能还喜欢

推荐文章

  1. 本地存储在HTML5中的应用
  2. 调查结果:HTML5元素在新产品中的
  3. 是否要重置CSS
  4. 2010年10个最佳网站建设创意
  5. CSS优化——链接列表内不要使用外
  6. 网站建设中常见的HTML错误
  7. 浏览器兼容——解析list-style
  8. CSS渲染效率——高效CSS之路
  9. CSS渲染效率的一些见解
  10. 简析CSS的核心观点
青岛网站建设超值惊爆价!
网站建设加1个非热门关键词排名仅需1800元,续费更是低至800元/年。

QQ在线会话