CSS性能:后代或两个直接后代选择器最好？

Question

给出以下HTML:

<ul>
  <li>
    <a ...

对于同一组声明,这两个规则集中哪一个更适合考虑其性能？

ul > li > a {
  color: black
}

ul a {
  color: black
}

Answer 1

要学习的最基本的概念是这个规则过滤.存在类别以过滤掉不相关的规则(因此样式系统不会浪费时间尝试匹配它们).

例如,如果元素具有ID,则仅检查与元素ID匹配的ID规则.仅检查在元素上找到的类的类规则.仅检查与标记匹配的标记规则.将始终检查通用规则.

避免后代选择器

后代选择器是一个比子选择器更昂贵的选择器

只要'a'出现在'ul'元素内的任何地方,BAD(后代选择器)就会将文本颜色设置为黑色

 ul a {
  color: black
}

比上面更好(子选择器)
'a'元素必须是'li'元素的子元素; 'li'元素必须是'ul'元素的子元素

 ul > li > a {
  color: black
}

进一步阅读LINK