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

【问题标题】：What is Very inefficient rules in css什么是 CSS 中非常低效的规则
【发布时间】：2012-07-14 19:41:05
【问题描述】：

我在 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

【问题讨论】：

标签： css

【解决方案1】：

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

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

Use efficient CSS selectors

有关的：

Optimize css vs Google page speed is messing with me

Why do browsers match CSS selectors from right to left?

【讨论】：