如何在 SASS 中创建组合子选择器？

简介：让我们先谈谈 CSS 中可用的各种类型的 Combinator。

组合器：组合器是解释选择器之间关系的东西。一个 CSS 选择器可以包含多个简单的选择器。在简单的选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

• 后代选择器(空格)
• 子选择器 (>)
• 相邻兄弟选择器 (+)
• 一般同级选择器 (~)

1. 后代选择器：后代选择器匹配指定元素的所有后代元素。

   以下示例选择

   元素内的所有

   元素：

   div p {
    background-color: red;
   }
   

2. 子选择器：子选择器选择作为指定元素的子元素的所有元素。

   以下示例选择作为

   元素的子元素的所有

   元素：

   div > p {
    background-color: red;
   }
   

3. 相邻兄弟选择器：相邻兄弟选择器选择作为指定元素的相邻兄弟的所有元素。兄弟元素必须具有相同的父元素，“相邻”意味着“紧随其后”。

   下面的例子选择了所有紧跟在

   元素之后的

   元素：

   div + p {
    background-color: red;
   }
   

4. 通用同级选择器：通用同级选择器选择指定元素的所有同级元素。

   以下示例选择作为

   元素的同级的所有

   元素：

   div ~ p {
    background-color: red;
   }
   

现在让我们谈谈在 SASS 中创建一个组合子选择器。

在 SASS 中有多种方法可以创建组合子选择器。

请参阅下面给出的示例。

如果没有组合子选择器，您可能会执行以下操作：

card {
 outer {
   inner {
     color: red;
   }
 }
}

如果你想用 > 产生相同的语法，你可以这样做：

card {
 > outer {
   > inner {
     color: red;
   }
 }
}

输出：

上面的代码在 CSS 中编译为给定的代码：

card > outer > inner {
 color: red;
}

或者在 SASS 中，它编译为：

card
 > outer
   > inner
     color: red