_#【CSS 优化】选择器

• 优化 css 选择器的关键点在于最右侧的选择器，也叫做 key selector 。大量增加浏览器工作的 key selector 包括：

  * {}
  div {}
  a {}
  .class0007[href] {}
  div:first-child {}

  后代选择器(#box a)比子选择器(#box > a)开销更多，后代选择器还需向其上级遍历直到根节点。

• 去掉不必要的限定

• 使用多元素选择器

  h1,h2,h3{}

• 避免单规则的属性选择器

  .selected [href=”#index”] {color: red;}

  其匹配开销是非常大的，浏览器先匹配所有的元素，检查其是否有href属性并且herf属性值等于”#index”， 然后分别向上逐级匹配class为selected的元素，直到文档的根节点。所以应避免使用关键选择器是单规则属性选择器的规则

• 避免类正则的属性选择器

  CSS3添加了复杂的属性选择器，可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的，正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=， |=， ^=， $=， 和 ~=语法的属性选择器。