编写高效的CSS选择器

CSS规范并没有明确浏览器如何去实现样式系统，仅仅是说明了它们必须这样做。有鉴于此，不同的样式系统引擎可能会拥有完全不同的表现和行为，特别是 Gecko 与 WebKit， 这两个引擎都是开源项目，实现了类似的算法，具有极其相近的优缺点。因此下面介绍的小技巧对于真实世界的 Web 文档将会十分有用。

样式系统如何拆分规则

样式系统将规则拆分成四个主要类别：

• ID 规则 (key selector 为id)

• Class 规则(key selector 为class)

• 标签规则(key selector 为 标签)

• 通用规则（除了三面之外都属于通用规则，包括[hidden=’true’]）

关键选择器（key selector）。选择器的最后面的部分即为关键选择器（即用来匹配目标元素的那部分，而不是该元素的祖先元素）。

a img, 
div > p, 
h1 + [title] {
  …
}

关键选择器为 img、 p 和 title。

样式系统如何匹配规则

样式系统从关键选择器开始匹配规则，然后左移（查找规则选择器的任何祖先元素）。只要选择器的子树（substree）一直在检查，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该条规则。

规则过滤是你需要学习的最基础的概念。分类存在的意义就是过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

这就是能够极大提高性能的关键。对于一个给定的元素，需要匹配的规则越少，样式的解析就会越快。

举个例子，如果一个元素拥有一个 ID，那么只有匹配该 ID 的 ID 规则才会被选中。同理，只有当 Class 规则中的 class 出现在元素上时该规则才被检查。只有当标签规则的标签匹配时该规则才被检查。通用规则始终都会检查。

高效 CSS 指南

避免通用规则

请确保规则不以通用类型选择器作为结束！

不用标签名或classes来限定 ID 规则

不要用标签名限定 class 规则

尽量使用最具体的类别

避免后代选择器

标签分类的规则不要包含子选择器

在使用子选择器的地方想想为什么

依赖继承

使用 -moz-image-region！

使用局部样式表

如非必要则避免特定浏览器的渲染特征

本文内容主要来自MDN中的CSS开发指南