CSS选择器由浏览器引擎从右到左匹配.因此,他们首先找到孩子,然后检查他们的父母,看看他们是否符合规则的其余部分.
对我来说,最简单的方法是使用元素数量最少的选择器.首先是ID(因为它们应该只返回1个元素).然后可能是类或具有最少节点数的元素 - 例如,页面上可能只有一个跨度,因此可以使用引用跨度的任何规则直接到达该节点.
以下是备份我的说法的一些链接
这听起来像这样做是为了避免必须看到父母的所有孩子(可能是很多孩子),而不是一个孩子的所有父母必须是一个孩子.即使DOM很深,它也只会在每个级别查看一个节点而不是RTL匹配中的多个节点.评估CSS选择器LTR或RTL更容易/更快？
Google PageSpeed提出了一项建议,要求网络开发人员使用高效的CSS选择器:
避免匹配大量元素的低效键选择器可以加快页面呈现速度.
细节
当浏览器解析HTML时,它构造一个内部文档树,表示要显示的所有元素.然后根据标准的CSS级联,继承和排序规则,将元素与各种样式表中指定的样式进行匹配.在Mozilla的实现中(也可能是其他元素),对于每个元素,CSS引擎都会搜索样式规则以查找匹配项.引擎从右到左评估每个规则,从最右边的选择器(称为"密钥")开始并移动每个选择器直到找到匹配或丢弃规则.("selector"是规则应适用的文档元素.)
根据该系统,发动机评估的规则越少越好.[...].之后,对于包含大量元素和/或大量CSS规则的页面,优化规则本身的定义也可以提高性能.优化规则的关键在于定义尽可能具体的规则并避免不必要的冗余,以允许样式引擎快速查找匹配,而无需花时间评估不适用的规则.
此推荐已从当前的网页速度见解规则中删除.现在我想知道为什么这个规则被删除了.在此期间,浏览器是否能够有效地匹配CSS规则？这个建议是否有效？