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;  } 
}

技术细节

浏览器支持