css - 什么是 CSS 中非常低效的规则

Question

我在 Google 上进行了速度测试，我的 CSS 成绩有好有坏。糟糕的成绩是由于低效的 CSS。那是什么？我该如何纠正它？

Very inefficient rules (good to fix on any page):
#menu ul ul li:first-child a:after    Tag key with 4 descendant selectors
#menu ul ul li:first-child a:hover:after    Tag key with 4 descendant selectors

Answer 1

浏览器从右到左解析 CSS 选择器。因此，如果您的后代选择器较少，CSS 的解析速度会更快。

后代选择器效率低下，因为对于每个匹配键的元素，浏览器还必须遍历 DOM 树，评估每个祖先元素，直到找到匹配项或到达根元素。密钥越不具体，需要评估的节点数量就越多。

使用高效的 CSS 选择器

---

有关的：

优化 css vs Google 页面速度让我很困惑

为什么浏览器从右到左匹配 CSS 选择器？