CSS优化，嵌套选择器以及ID /类名的浏览器索引

问题描述

|| 在渲染网页和应用样式时，浏览器会为ID和类名编制索引以进行有效搜索，还是在每次指定ID或类名以到达正确的元素时从顶部遍历整个DOM。 我想知道出于优化的原因，是否值得给浏览器提示（较长的选择器）某个ID的对象在哪里。即

#container #one-of-many-container-siblings #my-id 

代替：

#my-id

如果DOM很大，前者会产生更好的性能吗？     

解决方法

        实际上，它的工作方式与您的想法相反。 请记住，浏览器从右到左解析CSS选择器。 这个：

#container #one-of-many-container-siblings #my-id

将会比此采取更多步骤进行匹配：

#my-id

请参阅：http：//www.css-101.org/descendant-selector/go_fetch_yourself.php 考虑到您刚刚提出的问题，建议您阅读以下文章： http://css-tricks.com/ficiently-rendering-css/ 这将帮助您编写更有效的选择器：

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title=\'home\']     /* Universal */

    ,        HTML / CSS中ID的定义是元素的单个实例。假设您遵循该规则，那么您所需要做的就是该元素的ID。浏览器将搜索并找到该元素并停止。 使用您的“提示”，它将首先搜索第一个项目，然后搜索第二个，然后搜索第三个项目，然后再停止。您可能会看到，这效率更低。 在处理类时，这可能会变得更加模糊和模糊，但是一般规则是选择器越少越好。如果您发现自己做了三个或四个或五个选择器，则可能值得考虑进行一些重构，例如在战略性的位置添加类或ID，或者甚至不对CSS选择器如此具体。     ,        使用较短的版本将总是更快，因为执行的检查较少，但是我不知道为什么需要对页面上的CSS进行优化。     ,        根据经验，最好使用2个或更少的选择器。