SCSS 选择所有孩子

在 SCSS 中，我们可以使用“子选择器”来选择所有的子元素。

子选择器

子选择器用于匹配指定元素的所有子元素。它的语法如下：

.parent > .child {
  // 样式
}

上述代码选择所有 .parent 元素的直接子元素中类名为 .child 的元素。

例如：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <p>不是 .child 的子元素</p>
</div>

上述代码中，只有 .child 元素会被选择。

选择所有孩子

如果想要选择某个元素的所有子孙元素，可以使用后代选择器。

后代选择器使用空格分开两个元素名，例如：

.parent .child {
  // 样式
}

上述代码会选择 .parent 元素内的所有 .child 元素，包括子元素、孙子元素、曾孙元素等等。

例如：

<div class="parent">
  <div class="child">子元素1</div>
  <div>
    <p class="child">子元素2</p>
  </div>
</div>

上述代码中，两个元素都会被选择，因为它们都是 .parent 元素的子孙元素，并且都有 .child 类名。

总结

在 SCSS 中，选择所有孩子可以使用后代选择器。

后代选择器用于匹配指定元素内的所有子孙元素，语法是两个元素名之间用空格隔开。

.parent .child {
  // 样式
}

在选择孩子元素时，我们也可以使用子选择器。

子选择器用于匹配指定元素的直接子元素，语法是在两个元素名之间加上 > 符号。

.parent > .child {
  // 样式
}

以上是关于 SCSS 选择所有孩子的介绍。