怎样写css的样式效率可以更好？

怎样写css的样式效率可以更好？

　　从右到左

　　浏 览器如何读取你的CSS选择器有一个很重要的原则，那就是它们从右到左读取。这意味这像 ul > li a[title="home"] 这样的选择器，a[title="home"] 将是最先被读取的。这一部分通常被称为 “key selector” （可否称为“目标选择器” -_-!）选择器的最后一部分，也是被选择的标签。

　　

　　ID's 是最有效率的，通用符是最慢的

　　有四种目标选择器：ID, class, tag和通用符。看下他们各自的效率如何：

　　#main-navigation { } /* ID (最快) */

　　body.home #page-wrap { } /* ID */

　　.main-navigation { } /* Class */

　　ul li a.current { } /* Class *

　　ul { } /* Tag */

　　ul li a { } /* Tag */

　　* { } /* Universal (最慢) */

　　#content [title='home'] /* Universal */ 然后我们结合从右到左和目标选择器的概念，我们可以知道下面这个选择器并不高效：

　　#main-nav > li { } /* 看着很快实则很慢 */

　　尽管这让人有点费解......因为ID's是最高效的，浏览器可以通过ID迅速的找到 li。但事实是，li 标签是被先读取的。

　　不要用标签修饰

　　死也不要像下面这样干：

ul#main-navigation { }

　　ID's 是唯一的，所以不需要用标签修饰，这只会让它更低效。

　　如果你可以避免的话，也不要用它修饰 class 。class 不是唯一的，所以理论上你可以把它用在不同的标签。如果你愿意的话，你可以用标签控制不同的样式，这样你可能需要标签修饰（比如：li.first），但这样做的人很少，所以，don't .

　　绝对没有比用后代选择器更糟糕的做法了

　　David Hyatt：

　　后代选择器是CSS里最昂贵的选择器，昂贵得可怕——特别是当它放在标签和通用符后面时。

　　就如下面这个东东一样，绝对的效率毒瘤：

html body ul li a { }

　　一个选择器渲染失败比这个选择器被渲染更高效

　　我不是很确定是否有更好的证据去证明这一点，因为如果你有大量的选择器在CSS样式表里无法找到，这样的事情貌似很离奇，但一点必需注意的是，从右到左的解释一个选择器来说，一旦它找不到，那它就会停止尝试。然而如果它找到了，那它就需要花更多精力去解释了。

　　试想一下为何你这样写选择器

　　思考下这东东：

#main-navigation li a { font-family: Georgia, Serif; }

　　你可能不需要从 a 选择器开始（如果你只是想换个字体）。下面这个可能更高效些：

#main-navigation { font-family: Georgia, Serif; }

　　实用性

　　超级快速，零实用性

我们知道ID's 是最高效的选择器。当你想让渲染速度最高效时，你可能会给每个独立的标签配置一个ID，然后用这些ID写样式。那会超级快，也超级荒唐。这样的结果是语义极差，维护难到了极点。即使在核心部分你也不应该见过这样做的。

《怎样写css的样式效率可以更好？》此文由三行网络公司原创，转载请保留原文链接，谢谢！

【关键词标签】怎样写css的样式效率可以更好？    (PC+手机)响应式网站建设

• 谈谈视觉在提升交互的可用性，有哪些作用？
• 在网站设计中，要注意的几点视觉设计
• 新手如何做好业务做出好的成绩来?
• 水性油墨在网版印刷中该注意哪些问题?
• 什么是代购网店，怎样开代购网站，需要做怎..
• 对刚开了网店的新手卖家如何选择推广方式？
• 怎么做可以增加微博的知名度以粉丝数量？
• 网站改版时需要注意哪些事项？
• 京东商城为何不能用支付宝？怎么获得积分？..
• 网站推广效果一直不好，是因为什么？
• 网站优化：不知不觉就做着的伪SEO
• 一个新手如何通过QQ进行网店的推广和营销..
• 什么是UI，用户与界面的三大黄金准则是什..
• 在网站设计中出现的互相模仿有哪些利与弊？
• 如何对公司网站进行维护管理：管理制度