起因：头儿说我的css写法有问题，嵌套太多层
理由：google page speed
结论：跟css选择器有关，跟嵌套无关
例子：

下面是page speed 的截图：

下面是我粗略的翻译的一篇google 上的文章！（其中规则是指每条css样式）
Use efficient CSS selectors
使用效率高的css选择器
Overview
概述
Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.
避免低效率的选择器匹配大量的元素能加速页面的渲染.
Details
详细资料
As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. In Mozilla’s implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the “key”) and moving through each selector until it finds a match or discards the rule. (The “selector” is the document element to which the rule should apply.)
当浏览器分析html时,他构造了一个文档树来用显示所有的元素.然后匹配元素样式从各种各样的样式表中，按照标准的css层叠，继承和顺序规则。在Mozilla的编译器中，css引擎搜索每一个样式规则寻找一个匹配。css引擎预编每一个规则都是从右向左，从最右边的选择器开始并通过每一个选择移动，直到它找到一个匹配或丢弃规则。
According to this system, the fewer rules the engine has to evaluate the better. So, of course, removing unused CSS is an important step in improving rendering performance. After that, for pages that contain large numbers of elements and/or large numbers of CSS rules, optimizing the definitions of the rules themselves can enhance performance as well. The key to optimizing rules lies in defining rules that are as specific as possible and that avoid unnecessary redundancy, to allow the style engine to quickly find matches without spending time evaluating rules that don’t apply.
根据这一系统，较少的规则可以让引擎编译的更好！所以对于改善渲染性能，删除未使用的CSS是一个重要的步骤。在此之后，网页载有大量的内容和/或大量的CSS规则，优化的定义规则本身可以提高性能。关键在于理解优化规则，是尽可能具体，并避免不必要的冗余，使css引擎快速找到匹配。
The following categories of rules are considered to be inefficient:
以下类别的规则被认为是低效的：
Rules with descendant selectors
后代选择器
For example:
举例：
Rules with the universal selector as the key
body * {…}
.hide-scrollbars * {…}
Rules with a tag selector as the key
ul li a {…}
#footer h3 {…}
* html #atticPromo ul li a {…]
Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. The less specific the key, the greater the number of nodes that need to be evaluated.
后代选择器是低效的，因为为每个元素相匹配样式，浏览器还必须遍历DOM树，预编每一个祖先元素，直到它找到一个匹配或到达根元素。较少的具体样式，越多的节点需要进行预编。
Rules with child or adjacent selectors
子选择器和相邻选择器
For example:
Rules with the universal selector as the key
body > * {…}
.hide-scrollbars > * {…}
Rules with a tag selector as the key
ul > li > a {…}
#footer > h3 {…}
Child and adjacent selectors are inefficient because, for each matching element, the browser has to evaluate another node. It becomes doubly expensive for each child selector in the rule. Again, the less specific the key, the greater the number of nodes that need to be evaluated. However, while inefficient, they are still preferable to descendant selectors in terms of performance.
Rules with overly qualified selectors
For example:
ul#top_blue_nav {…}
form#UserLogin {…}
ID selectors are unique by definition. Including tag or class qualifiers just adds redundant information that needs to be evaluated needlessly.
Rules that apply the :hover pseudo-selector to non-link elements
For example:
h3:hover {…}
.foo:hover {…}
#foo:hover {…}
div.faa :hover {…}
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
* See a bug report at http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387.
Recommendations
建议
Avoid a universal key selector.
避免通用的样式选择。
Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.
允许元素从祖先继承，或使用一个样式关联多个元素。
Make your rules as specific as possible.
使您的规则尽可能具体
Prefer class and ID selectors over tag selectors.
Remove redundant qualifiers.
倾向于class 和ID选择符的标记选择器。删除多余的限定
These qualifiers are redundant:
这些是多余的限定
• ID selectors qualified by class and/or tag selectors
• ID选择器限制在class 和标签选择器中
• Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).
• Class 选择器限制在标签选择器中（当一类是只用于一个标记，这是一个好的设计实践）
Avoid using descendant selectors, especially those that specify redundant ancestors.
避免使用后代选择器，特别是那些指定多余的祖先。
For example, the rule body ul li a {…} specifies a redundant body selector, since all elements are descendants of the body tag.
Use class selectors instead of descendant selectors.
For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:
ul li {color: blue;}
ol li {color: red;}
You could encode the styles into two class names and use those in your rules; e.g:
你可以分为两个类别名称，使用那些在您的规则;
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.
Avoid the :hover pseudo-selector for non-link elements for IE clients.
If you use :hover on non-anchor elements, test the page in IE7 and IE8 to be sure your page is usable. If you find that :hover is causing performance issues, consider conditionally using a JavaScript onmouseover event handler for IE clients.

相关日志

• 兼容 IE 和 FF 的换行 CSS 推荐样式 (0)
• IE中链接下划线粘连和字体大小不一问题 (0)