首先，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 要高效
网友评论