css 是从右往左解析的

css 为什么会从右往左解析呢？

下面举个例子：

假设有以下 HTML 结构：

<div class="container">
  <div class="box">
    <h2>Title</h2>
  </div>
</div>

以下样式表：

提醒

这里提醒一下，平时我们使用构建工具，会使用 css 预处理，写的 css 大多都是嵌套结构。但是被编译后的 css 最后还是变成了扁平化结构，因为只有这样浏览器才能认识并解析它。

/* 样式一 */
.container .box h2 {
  color: blue;
}
/* 样式二 */
.box .item {
  font-weight: bold;
}
/* 样式三 */
.item:hover {
  background-color: yellow;
}

对于 class 为 container 的标签，浏览器会应用样式一、二、三。

首先样式一的最右边 h2 选择器匹配不上，浏览器就直接跳过样式一了，然后检查样式二能否应用在该标签上。

而如果是从左往右解析，第一个 .container 类是匹配的，然后去检查接下来的 .box 类是否匹配，最后发现不匹配，然后浏览器才跳过该样式的解析。

这样从左往右解析就比从右往左解析多了一步。如果是很复杂的 css 选择器，可能不止一步。

所以说，之所以 css 从右往左解析，是因为能提高解析的效率。