对一个层次非常多的子孙选择器的测试给出了 大约440的数值!

通过这我们可以发现IDs/classes与types/descendants的差别非常巨大...它们自身之间的差异很细微。

注意 这些数值在不同的机器和浏览器变化非常大。我极力建议你自己运行一下。

组合选择器

你可以单独使用一种标准选择器，如#nav，来选择所有以"nav"为ID的元素，你也可以使用组合选择器，如#nav a，来选择任何在ID为’nav’的元素里面的链接元素。

现在，我们从左到右读这个组合标签。我们先找到#nav ，然后再找到里面的元素。但是我们的浏览器不是这样解析的，它是从右到左来解析这些组合选择器的。

当我们看到#nav里面有个a，而浏览器看到的却是有个a在 #nav里面，这些细微的差异对浏览器的性能有重大影响，同事学习他们是很有价值的。

如果想知道浏览器这样解析的原因，请参考this discussion on Stack Overflow.

对浏览器来说，从最右边的元素（它最想渲染的元素）开始，然后回溯到DOM树比从DOM树的最高层开始选择向下寻找，甚至可能达不到最右边的选择器（关键的选择器）要高效。

这对CSS选择器的性能有重大影响....

关键选择器

这里讨论的关键选择器, 是处在复杂选择器最右端的选择器，也是浏览器最先解析的选择器。

让我们回到讨论开始的地方，哪种选择器最高效？哪种选择器作为关键选择器会影响选择器的性能；当我们书写CSS代码的时候，正是这个关键选择器影响选择器的效率。

一个关键选择器是这样的

#content.intro{}

天生高效选择器如类型选择器是不是就会有更高的性能？浏览器会寻找.Intro的所有实例（数量不会很多），然后向上查找DOM树，以确定该关键选择器是否在以“content’”为ID的元素里面。

然后，以下的选择器性能就不怎么好了：

#content*{}

这个选择器做的工作是这样子的，它先查找每个页面（是每个单个的页面），然后去看看它们是否有一个 #content 的父元素。这是一个非常不高效的选择器，因为它的关键选择器执行开销太大了。

运用这些知识我们就能在分类和选择元素时做更好的选择。