8 月 29 日，F(xiàn)irefox 117版本發(fā)布，該版本增加了對(duì) CSS 原生嵌套的支持。至此，所有主流桌面瀏覽器現(xiàn)在都已經(jīng)支持原生 CSS 嵌套語(yǔ)法！

注意，有些移動(dòng)瀏覽器還不支持該語(yǔ)法，不過(guò)，這些瀏覽器合計(jì)只占約全球?yàn)g覽器市場(chǎng)份額的 3%。

之前，我們需要借助預(yù)處理器（SCSS/Less）來(lái)編寫嵌套語(yǔ)法。現(xiàn)在，CSS 終于原生支持嵌套語(yǔ)法了。下面就來(lái)看看原生 CSS 嵌套是怎么用的，未來(lái)是否還需要使用預(yù)處理器？

CSS 嵌套入門

使用 CSS 嵌套，可以編寫更少的代碼，并且代碼更易于閱讀和維護(hù)。沒(méi)有CSS嵌套時(shí)，我們只能這樣輸入完成的選擇器路徑：

.parent1 .child1,
.parent2 .child1 {
  color: red;
}

.parent1 .child2,
.parent2 .child2 {
  color: green;
}

.parent1 .child2:hover,
.parent2 .child2:hover {
  color: blue;
}

使用新的嵌套語(yǔ)法，可以將子選擇器嵌套在父選擇器中：

.parent1, .parent2 {

  .child1 {
    color: red;
  }

  .child2 {
    color: green;

    &:hover {
      color: blue;
    }
  }
}

我們可以將選擇器嵌套任意深度，但是最好不要超過(guò)三層，雖然沒(méi)有技術(shù)上的硬性限制，但是嵌套深度越大，會(huì)使代碼更難讀，并且生成的 CSS 可能會(huì)變得不必要的冗長(zhǎng)。

CSS 嵌套語(yǔ)法

可以將任何選擇器嵌套在另一個(gè)選擇器中，但它必須以符號(hào)開(kāi)頭，例如 &、.（用于HTML類）、#（用于HTML id）、@（用于媒體查詢）、：、::、*、+、~、> 或 [。換句話說(shuō)，它不能直接引用HTML元素。下面這段代碼是無(wú)效的。

選擇器不會(huì)被解析。

.parent1 {
  p {
    color: blue;
  }
}

需要使用 & 符號(hào)來(lái)引用當(dāng)前選擇器：

.parent1 {
  & p {
    color: blue;
  }
}

另外，還可以使用以下任一方法：

• > p：只會(huì)為 .parent1 的直接子元素設(shè)置樣式。
• :is(p)：使用最具體選擇器的特異性。
• :where(p)：特異性為零。

在這個(gè)例子中，它們都可以正常工作，但在更復(fù)雜的樣式表中，可能會(huì)遇到特異性問(wèn)題。

& 還允許在父選擇器上針對(duì)偽元素和偽類進(jìn)行定位，例如：

p.my-element {

  &::after {}

  &:hover {}

  &:target {}

}

如果不使用&符號(hào)，將會(huì)選擇該選擇器的所有子元素，而不是p.my-element。（在Sass中也是如此。）

可以在選擇器的任何位置使用&，例如：

.child1 {
  .parent3 & {
    color: red;
  }
}

這將轉(zhuǎn)換為以下非嵌套語(yǔ)法：

.parent3 .child1 { color: red; }

我們甚至可以在選擇器中使用多個(gè)&符號(hào)：

ul {
  & li & {
    color: blue;
  }
}

這將選擇嵌套的<ul>元素（ul li ul），但不建議這樣做，因?yàn)檫@樣代碼會(huì)變得混亂。

除此之外，還可以嵌套媒體查詢。以下代碼將為段落元素應(yīng)用青色，當(dāng)瀏覽器窗口寬度至少為800像素時(shí)，將會(huì)覆蓋該樣式，并將段落元素的顏色更改為紫色。

p {
  color: cyan;

  @media (min-width: 800px) {
    color: purple;
  }
}

CSS 嵌套陷阱

原生嵌套將父選擇器封裝在:is()中，這可能會(huì)導(dǎo)致與Sass輸出的差異。

考慮下面的代碼：

.parent1, #parent2 {
  .child1 {}
}

當(dāng)在瀏覽器中解析時(shí)，這會(huì)變成了以下內(nèi)容：

:is(.parent1, #parent2) .child1 {}

由于原生嵌套使用了:is()并根據(jù)其最具體選擇器（#parent2）的優(yōu)先級(jí)來(lái)確定優(yōu)先級(jí)，因此在.parent1內(nèi)部的.child1元素具有101的優(yōu)先級(jí)。而對(duì)于Sass編譯，會(huì)將相同的代碼編譯成不同的結(jié)構(gòu)。

Sass 會(huì)將相同的代碼編譯為以下內(nèi)容：

.parent1 .child1,
#parent2 .child1 {

}

在這種情況下，.parent1內(nèi)部的.child1元素的優(yōu)先級(jí)為002，因?yàn)樗ヅ淞藘蓚€(gè)類（#parent2被忽略）。它的選擇器比原生選項(xiàng)更不具體，因此在級(jí)聯(lián)中被覆蓋的可能性較大。

還可能遇到一個(gè)更微妙的問(wèn)題，考慮以下代碼：

.parent .child {

  .grandparent & {}

}

原生CSS的等效代碼如下：

.grandparent :is(.parent .child) {}

這將匹配以下順序錯(cuò)誤的HTML元素：

<div class="parent">
  <div class="grandparent">
    <div class="child">MATCH</div>
  </div>
</div>

MATCH 被應(yīng)用樣式是因?yàn)镃SS解析器執(zhí)行了以下操作：

• 它找到所有具有class為child的元素，并且這些元素在DOM層次結(jié)構(gòu)中的任意位置都有一個(gè)祖先元素為parent。
• 找到包含MATCH的元素后，解析器檢查是否存在一個(gè)祖先元素為grandparent，同樣是在DOM層次結(jié)構(gòu)的任意位置。它找到了一個(gè)并相應(yīng)地給該元素應(yīng)用樣式。

但在Sass中，情況并非如此，它編譯成以下內(nèi)容：

.grandparent .parent .child {}

由于HTML元素的類沒(méi)有遵循嚴(yán)格的grandparent、parent和child的順序，因此上面的HTML不會(huì)被應(yīng)用樣式。

最后，Sass 使用字符串替換，因此以下聲明也是有效的，并且匹配任何具有outer-space類的元素：

.outer {
  &-space { color: black; }
}

原生 CSS 會(huì)忽略&-space選擇器。

還需要預(yù)處理器嗎？

現(xiàn)在很多前端項(xiàng)目都還在借助CSS預(yù)處理器來(lái)編寫 CSS，以添加一下實(shí)用的功能到 CSS 中，例如 mixin、函數(shù)、嵌套等功能。在應(yīng)用的構(gòu)建過(guò)程中，會(huì)將這些代碼轉(zhuǎn)換為常規(guī)的 CSS，以便瀏覽器可以理解它。

Sass 開(kāi)發(fā)團(tuán)隊(duì)也宣布他們將支持在.css文件中使用原生CSS嵌套，并保持代碼不變。他們將繼續(xù)像以前一樣編譯嵌套的SCSS代碼，以避免破壞現(xiàn)有的代碼庫(kù)，但在全局瀏覽器支持達(dá)到98%時(shí)，將開(kāi)始使用:is()選擇器。

現(xiàn)在，越來(lái)越多預(yù)處理器帶來(lái)的功能都在原生 CSS 中內(nèi)置了，嵌套語(yǔ)法就是其中之一。雖然，嵌套語(yǔ)法已被主流瀏覽器支持，但是很多用戶還在使用舊版本的瀏覽器，無(wú)法很好的得到新語(yǔ)法的支持，并且個(gè)人認(rèn)為，預(yù)處理器的嵌套語(yǔ)法相比原生嵌套語(yǔ)法更簡(jiǎn)單易懂。所以，在很長(zhǎng)一段時(shí)間內(nèi)，我們?nèi)匀皇切枰柚A(yù)處理器來(lái)編寫 CSS。

除此之外，我們?nèi)匀恍枰柚?PostCSS 等后處理器來(lái)處理新的 CSS 功能，以將其轉(zhuǎn)化為瀏覽器可以理解的內(nèi)容。