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

Question

给出以下 HTML：

<ul>
  <li>
    <a ...

对于同一组声明，考虑到它们的性能，这两个规则集中使用哪一个更可取？

ul > li > a {
  color: black
}

ul a {
  color: black
}

Answer 1

The most fundamental concept to learn is this rule filtering. The categories exist in order to filter out irrelevant rules (so the style system doesn’t waste time trying to match them).

For example, if an element has an ID, then only ID rules that match the element’s ID will be checked. Only Class Rules for a class found on the element will be checked. Only tag rules that match the tag will be checked. Universal Rules will always be checked.

避免后代选择器

The descendant selector is a more expensive selector than a child selector

BAD（后代选择器）
每当 'a' 出现在 'ul' 元素

中的任何位置时，将文本颜色设置为黑色

 ul a {
  color: black
}

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

 ul > li > a {
  color: black
}

进一步阅读LINK

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

CSS performance: descendent or two direct descendent selectors best?

css

performance

css-selectors