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

Question

我在谷歌上进行了速度测试，我的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-Selectors。因此，如果你的后代选择器较少，那么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?