处理多个后代选择器的最有效方法？

Question

我正在创建一个包含两个部分的网站；一个主要是静态的一面，它使用带有彩色背景的复杂设计，以及一个只使用白色背景的动态博客。

我已在我的 _settings.scss (Foundation 5) 文件中指定对所有文本元素使用白色背景上的深色文本。这没有问题，并且完美地适用于博客和静态方面。

我的绊脚石是找到一种有效的方法来管理不同颜色的背景和静态侧每个背景的适当文本样式。

我有一个“深色”和“浅色”部分，分别使用深蓝色和浅蓝色背景，在页面下方交替显示。

到目前为止，我一直将它们用作类名，充当我内容的包装器。即

<div class="dark section"> 
  <div class="row"> 
    <div class="small-8 columns (etc.)>
      <h1> Some Header </h1>
      <p> Some text </p>
    </div>
  </div>
 </div>

<div class="light section"> 
  <div class="row"> 
    <div class="small-8 columns (etc.)>
      <h1> Some Header </h1>
      <p> Some text </p>
    </div>
  </div>
 </div>

这是我的 HTML。两者的文本 (p) 都是白色的，我对它的样式没有任何问题（覆盖 _settings.scss）。这是给我问题的标题。我正在努力寻找一种方法来定位每个彩色部分中的标题，而不会溢出到下一个备用彩色部分；或者不根据背景颜色为标题的每个实例添加大量类。

到目前为止，我一直在使用：（颜色简化，因为我使用的是 SCSS 变量）

.dark {
   background-color: dark-blue;
   colour: white;
}

.dark h1,h2 {
  colour: orange;
}

.light {
   background-color: light-blue;
   colour: white;
}

.light h1,h2 {
  colour: dark-blue;
}

.section {
 *insert various padding here*
}

现在在我看来，这应该可行。但是，我让 light 类中的样式覆盖了 dark 类中的样式（不同的地方）。即深色部分有深蓝色的标题，而不是橙色。我似乎无法阻止选择器通过级联从一个“部分”骑行到另一个。

我可能做了一个愚蠢的简单疏忽，但我们将不胜感激。

Answer 1

只需使用后代选择器：

.dark h1 {
    color: orange;
}

在这里，我们选择了一个班级 (.dark)，然后选择了一个 h1，它是所选班级任何级别的子级。所以这将适用于任何 <h1> 元素在你的 <div class="dark section"> 元素，无论是什么级别。

如果您想将此后代选择器用于多个元素，则需要将类添加到逗号的每一侧。目前，您选择的 .dark h1, h2 正在选择所有 h1 类的子元素 .dark （正如我在上面解释的那样），和所有 h2 元素 在任何地方你的身体，期间......同样适用于.light。 您需要的是：

.dark h1, .dark h2 {
    color: orange;
}

.light h1, .light h2 {
    color: dark-blue;
}

请注意，在上面的原始代码中，您输入的是colour 而不是color。该规范使用美式英语，因此您需要修复这些问题，除非您使用预处理器将它们重命名为变量或其他内容。另请注意，您尚未在“small-8”类名称中添加结束 "。