css选择器的效率

CSS选择器对我们来说并不是什么新东西，比如我们常用的基本选择器“元素标签选择器div”、“id选择器#header”、“类选择器.class”，或者我们很少见的伪类选择器“:focus”以及更复杂的 css3选择器“:nth-child”等等。
选择器有一个固有的效率，我们来看Steve Souders给排的一个顺序：
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）
上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最低。

我们不得不提的是，纵使ID选择器很快、高效，但是它也仅仅如此。从Steve Souders的CSS Test我们可以看出ID选择器和类选择器在速度上的差异很小很小。

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

下面是对css选择器使用时的一些提醒：

（1）不要用标签修饰ID

如： ul#main-navigation { }

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

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

（2） 没有比用后代选择器更糟糕的做法了

David Hyatt:
后代选择器是CSS里最昂贵的选择器，昂贵得可怕——特别是当它放在标签和通用符后面时。
就如下面这个东东一样，绝对的低效率：

html body ul li a { }

（3） 你的代码可以更高效

思考下你为何这样写代码：

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

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

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

（4） 不要过度限制地写一大串

拥有一个明确的关键选择器最大的好处就是你可以避免使用过度限制选择器。一个过度限制选择器可能像：

html body .wrapper #content a {}

这里的写的太多了，至少3个选择器是完全不需要的。它可以最多像这个样子：

#content a {}

一些更现实的例子：#nav li a{}变成这个：#nav a {}

我们知道如果a在li里面，它也必定在#nav里面，所以我们可以马上把li从选择器组中拿掉。然后，既然我们知道在页面中只有一个ID为nav的元素，那么它依附的元素就是完全没有关系得了，我们也可以拿掉ul

过度限制选择器使浏览器工作比它实际需要的更繁重，花费的时间更多。我们可以删掉不必需的限制，来使我们的选择器更简单和高效。