浏览器是怎样解析 CSS 选择器的

首先，CSS 的读取顺序是从右向左

举个例子

.mod-nav h3 span { font-size: 16px }

它的读取顺序是：

• 先找到所有的 span
• 沿着 span 的父元素找到 h3
• 如果中途找到了符合匹配规则的节点就加入结果集
• 如果直到根元素 html 都没有匹配，就不再遍历这条路径
• 从下一个 span 开始重复这个过程

那么，为什么读取顺序是从右向左呢？

举个例子：

假如 DOM 结构如上图，
假设匹配规则是 .mod-nav h3 span

如果从左向右匹配，过程是：

• 遍历子节点 header 和子节点 div
• 然后各自向子节点便利
• 在右侧的 div 分支中，最后遍历到了叶子节点 a ，发现不符合规则，需要回溯到 ul 再遍历下一个 li-a
• 假如，有 1000 个 li，则这 1000 次遍历与回溯会损失很多性能

如果从右向左匹配：

• 先找到最有节点 span，对于每一个 span
• 向上寻找节点 h3
• 由 h3 再向上寻找 class=mod-nav 的节点
• 最后直到 html 结束这个分支

总结：这是一个树形结构，很明显，从 child 开始找 parent 比从 parent 找 child 要高效

原文
https://www.cnblogs.com/zhaodongyu/p/3341080.html