CSS选择器在哪个方向验证？ [英] In which direction are CSS selectors validated?

问题描述

我记得在一段时间在线观看视频，这是雅虎工程师发表的演讲，他提到CSS选择器是由浏览器从左到右读取的，而不是从左到右。含义 #body .header .links a 实际上会拉出页面上的所有锚点，过滤类别为 links $

I remember watching a video a while back online that was a talk given by an engineer at Yahoo and in it he mentioned that CSS selectors are read, by the browser, right to left and not left to right. Meaning #body .header .links a would actually pull out all anchors on the page filtering those with a parent of class links that had a parent of class header that had a parent with id body.

我找不到视频，想知道是否有任何人有任何参考，强化这一点，还是不正确？不是这意味着像 #body .header .links li a 实际上比只是说 #body .links a ？假设两者都在一个给定的页面上。

I can't find the video and was wondering if anyone has any references to reinforce this or is it not correct? Wouldn't this mean that something like #body .header .links li a is actually slower than just saying #body .links a? Assuming both work on a given page.

推荐答案

我认为这篇博客文章朝着这个方向： 简化CSS选择器

I think this blog article goes into that direction: Simplifying CSS Selectors

优化CSS选择器的关键是集中在最右边的选择器，也称为键选择器（巧合？）。这里有一个更昂贵的选择器：A.class0007 * {}。虽然此选择器可能看起来更简单，但浏览器匹配的代价更高。因为浏览器从右向左移动，所以它通过检查所有与键选择器匹配的元素*开始。这意味着浏览器必须尝试将此选择器与页面中的所有元素进行匹配。此图表显示使用此通用选择器的测试页与以前的后代选择器测试页相比的加载时间差异。

The key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector (coincidence?). Here’s a much more expensive selector: A.class0007 * {}. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, "*". This means the browser must try to match this selector against all elements in the page. This chart shows the difference in load times for the test page using this universal selector compared with the previous descendant selector test page.

没有详细阅读它（作为建议来看我），但它看起来很不错。

I haven't read through it in detail yet (it came to me as a recommendation) but it looks very good.

这篇关于CSS选择器在哪个方向验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！