不正经的前端 | 八股浏览器是怎样解析 CSS 选择器的？
题干
- 浏览器解析 CSS 选择器
题解
CSS 选择器是一种用来指定元素样式的语法，它可以根据元素的标签、类名、ID、属性、状态等来选择它们。CSS 选择器可以有多个部分组成，比如 div#content p span 就是一个由四个部分组成的选择器，它表示选择 ID 为 content 的 div 元素下的所有 p 元素下的所有 span 元素。
那么，浏览器是如何解析这样的选择器的呢？你可能会认为，浏览器是从左到右地按照选择器的顺序来匹配元素，先找到所有的 div 元素，再从中筛选出 ID 为 content 的元素，再从它的子元素中找到所有的 p 元素，再从它们的子元素中找到所有的 span 元素。这样看起来很合理，也很直观，但实际上并不是这样的。
事实上，浏览器是从右到左地解析 CSS 选择器的。也就是说，浏览器会先找到所有的 span 元素，然后检查它们是否有一个 p 元素作为父元素，再检查这个 p 元素是否有一个 ID 为 content 的 div 元素作为父元素。这样做的原因是为了提高匹配效率和准确性。
为什么这样做会更快呢？想象一下，如果你要在一堆人中找到一个穿着红色衣服、戴着黑色帽子、背着蓝色书包、骑着黄色自行车的人，你会怎么做？你会先找到所有穿着红色衣服的人，再从中找到戴着黑色帽子的人，再从中找到背着蓝色书包的人，再从中找到骑着黄色自行车的人吗？还是你会先找到所有骑着黄色自行车的人，再从中找到背着蓝色书包的人，再从中找到戴着黑色帽子的人，再从中找到穿着红色衣服的人呢？
显然，后者会更快一些，因为骑着黄色自行车的人相对于其他条件来说更少见，更容易被区分出来。同理，在一个网页中，span 元素相对于 div 元素来说更少见，更容易被区分出来。如果我们从左到右地匹配选择器，我们可能会遍历很多不必要的 div 元素和 p 元素，而如果我们从右到左地匹配选择器，我们可以快速地缩小匹配范围，只关注那些符合条件的 span 元素。
为什么这样做会更准确呢？想象一下，如果你要在一堆人中找到一个叫张三、住在北京、工作在腾讯、喜欢打篮球的人，你会怎么做？你会先找到所有叫张三的人，再从中找到住在北京的人，再从中找到工作在腾讯的人，再从中找到喜欢打篮球的人吗？还是你会先找到所有喜欢打篮球的人，再从中找到工作在腾讯的人，再从中找到住在北京的人，再从中找到叫张三的人呢？
显然，后者会更准确一些，因为喜欢打篮球的人相对于其他条件来说更具有特征性，更容易被识别出来。同理，在一个网页中，ID 为 content 的 div 元素相对于其他条件来说更具有特征性，更容易被识别出来。如果我们从左到右地匹配选择器，我们可能会匹配到一些不相关的 div 元素和 p 元素，而如果我们从右到左地匹配选择器，我们可以快速地确定目标元素，只关注那些符合条件的 div 元素。
总之，浏览器是从右到左地解析 CSS 选择器的，这样做可以提高匹配效率和准确性，也可以避免一些不必要的回溯和重复匹配。这也是为什么我们在编写 CSS 选择器的时候，要尽量避免使用过于复杂和冗余的选择器，而要使用简洁和具体的选择器，这样可以减少浏览器的工作量，也可以提高页面的渲染性能。
相关
贡献者
isboyjc