大家好，我是 CUGGZ。

最近在看 caniuse.com 時(shí)發(fā)現(xiàn)，Chrome 和 Edge 瀏覽器將在 109 版本實(shí)驗(yàn)性支持 CSS 原生嵌套語(yǔ)法！

1 月 10 日，Chrome 109 發(fā)布；1 月 26 日，Safari 技術(shù)預(yù)覽版 162 發(fā)布。這兩個(gè)瀏覽器版本都帶來(lái)了 CSS 嵌套的實(shí)驗(yàn)性支持。Chrome 官方指出，添加將 CSS 樣式規(guī)則嵌套在其他樣式規(guī)則中的功能，將來(lái)自外部的選擇器與內(nèi)部規(guī)則相結(jié)合，以提高樣式表的模塊化和可維護(hù)性。

下面就來(lái)看看 CSS 嵌套語(yǔ)法是如何使用的！

基本概念

所謂的嵌套，就是將一個(gè) CSS 規(guī)則放在另一個(gè)（嵌套規(guī)則）中，子規(guī)則的選擇器將相對(duì)于父規(guī)則的選擇器。這有利于代碼的模塊化和可維護(hù)性。原來(lái)只能在 CSS 預(yù)處理器中使用的嵌套功能，先在可以在原生 CSS 中使用。

其實(shí)，CSS 嵌套和 Sass 的嵌套類似，比如，對(duì)于以下 CSS 樣式：

table.colortable td {
  text-align:center;
}

table.colortable td.c {
  text-transform:uppercase;
}

table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}

table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

如果使用 CSS 嵌套時(shí)，就是這樣的：

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

可以看到，使用嵌套不僅消除重復(fù)，相關(guān)規(guī)則的分組還提高了生成的 CSS 的可讀性和可維護(hù)性。

嵌套規(guī)則

嵌套規(guī)則可以使用嵌套選擇器（&） 直接引用父規(guī)則的匹配元素，或者使用相對(duì)選擇器語(yǔ)法指定“后代”以外的關(guān)系。

.foo {
  color: red;

  &:hover {
    color: blue;
  }
}

/* 相當(dāng)于: */

.foo { color: red; }
.foo:hover { color: blue; }

.foo {
  color: red;

  + .bar {
    color: blue;
  }
}

/* 相當(dāng)于: */

.foo { color: red; }
.foo + .bar { color: blue; }

但是，以標(biāo)識(shí)符（類型選擇器）開(kāi)始嵌套選擇器是無(wú)效的：

div {
  color: red;

  input {
    margin: 1em;
  }
}
/* 無(wú)效，因?yàn)?input 是一個(gè)標(biāo)識(shí)符 */

如果想繼續(xù)這樣編寫，就需要稍微進(jìn)行修改：

div {
  color: red;

  & input { margin: 1em; }
  /* 有效，不再以標(biāo)識(shí)符開(kāi)頭 */

  :is(input) { margin: 1em; }
  /* 有效，以冒號(hào)開(kāi)頭，并且等同于之前的規(guī)則 */
}

更多嵌套規(guī)則詳見(jiàn) CSS 嵌套規(guī)范草案：https://drafts.csswg.org/css-nesting/

嵌套選擇器

在使用嵌套規(guī)則時(shí)，必須能夠引用父規(guī)則匹配的元素。為此，規(guī)范中定義了一個(gè)新的選擇器，即嵌套選擇器，寫為 & 。

當(dāng)在嵌套樣式規(guī)則的選擇器中使用時(shí)，嵌套選擇器表示與父規(guī)則匹配的元素。當(dāng)在任何其他上下文中使用時(shí)，它表示與該上下文中的 :scope 相同的元素。

嵌套選擇器可以通過(guò) :is() 選擇器將其替換為父樣式規(guī)則的選擇器。例如：

a, b {
  & c { color: blue; }
}

這就相當(dāng)于：

:is(a, b) c { color: blue; }

嵌套選擇器不能表示偽元素（與 :is() 的行為相同）：

.foo, .foo::before, .foo::after {
  color: red;

  &:hover { color: blue; }
}

這里，&? 只代表.foo匹配的元素，它等同于：

.foo, .foo::before, .foo::after {
  color: red;
}

.foo:hover {
  color: blue;
}

嵌套選擇器的特異性（權(quán)重）等于父樣式規(guī)則的選擇器列表中復(fù)雜選擇器中最大的特異性（與 :is() 的行為相同）：

#a, b {
  & c { color: blue; }
}

.foo c { color: red; }

DOM 結(jié)構(gòu)如下：

<b class=foo>
  <c>Blue text</c>
</b>

文本將是藍(lán)色的，而不是紅色的。&? 的特異度是 #a?([1,0,0]) 和 b?([0,0,1]) 特異性中較大的一個(gè)，所以是 [1,0,0]，而整個(gè) & c? 選擇器具有特異性 [1,0,1]，它大于 .foo c ([0,1,1]) 的特異性。

值得注意的是，這與將嵌套手動(dòng)擴(kuò)展為非嵌套規(guī)則時(shí)得到的結(jié)果不同，因?yàn)?nbsp;color: blue? 聲明將由 b c? 選擇器 ([0,0,2]) 匹配，而不是#a c ([1,0,1])。

小結(jié)

目前，CSS 原生嵌套語(yǔ)法處于開(kāi)發(fā)者試用狀態(tài)，CSS 工作組正在制定相關(guān)規(guī)范，Chrome 瀏覽器預(yù)計(jì)將于 112 版本正式推出 CSS 原生嵌套功能。

由于 CSS 嵌套語(yǔ)法規(guī)范尚未完成，隨時(shí)可能進(jìn)行更改。因此，本文所展示的規(guī)則可能會(huì)有所變化。期待不久的將來(lái) CSS 原生嵌套語(yǔ)法登錄瀏覽器正式版本！