CSS 嵌套選擇器 (&)

定義和用法

CSS 嵌套 (&) 選擇器用于在另一個元素的上下文中為元素應用樣式。

嵌套減少了為相關元素重復選擇器的需求。

實例

例子 1

在嵌套之前，您必須顯式地分別聲明每個選擇器，如下所示：

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

親自試一試

例子 2

嵌套后，選擇器被延續，相關的樣式規則被分組在父規則中：

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

親自試一試

提示：如果上例中的 .box 樣式應從您的項目中刪除，您可以刪除整個組，而不必搜索相關的選擇器。

CSS 語法

parentrule {
  css declarations;
  & childrule {
    css declarations;  } 
}

技術細節

瀏覽器支持