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

Question

给出以下HTML：

<ul>
  <li>
    <a ...

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

ul > li > a {
  color: black
}

ul a {
  color: black
}

Answer 1

  

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

     

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

避免使用后代选择器

  

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

BAD （后代选择器）
只要'a'出现在'ul'元素中的任何位置

，就会将文本颜色设置为黑色

 ul a {
  color: black
}

比上面好（子选择器）
'a'元素必须是'li'元素的子元素; 'li'元素必须是'ul'元素的子元素

 ul > li > a {
  color: black
}

进一步阅读LINK