在 Sass 中，你可以使用子组合选择器（>）、同层组合选择器（+）、以及通用同层组合选择器（~）来选择特定关系的元素。以下是关于这些选择器的基本示例：

1. 子组合选择器 >

子组合选择器 > 选择作为某个元素的直接子元素的元素。
// 子组合选择器
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

在这个例子中，> li 选择的是直接作为 ul 子元素的 li 元素。

2. 同层组合选择器 +

同层组合选择器 + 选择紧接在同一父元素下的元素。
// 同层组合选择器
h2 {
  color: #3498db;
}

h2 + p {
  margin-top: 10px;
}

在这个例子中，h2 + p 选择的是紧接在 h2 元素后的 p 元素。

3. 通用同层组合选择器 ~

通用同层组合选择器 ~ 选择在同一父元素下的任何位置的所有匹配元素。
// 通用同层组合选择器
input[type="checkbox"] {
  margin-right: 5px;
}

input[type="checkbox"]:checked ~ label {
  color: #27ae60;
}

在这个例子中，input[type="checkbox"]:checked ~ label 选择的是在同一父元素下的任何位置，且位于已选中的复选框之后的所有 label 元素。

这些组合选择器可以帮助你更精确地选择和样式化 HTML 结构中的元素，提高样式表的灵活性。然而，同样要注意不要滥用这些选择器，以避免生成过于复杂的选择器，影响样式表的可维护性。


转载请注明出处：http://www.zyzy.cn/article/detail/4327/sass