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

Question

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

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

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

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

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

<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这是所选类(class)的任何级别的 child 。所以这将适用于任何 <h1>元素 在你的 <div class="dark section"> 元素，无论什么级别。

如果要将此后代选择器用于多个元素，则需要将类添加到逗号的每一侧。当前您选择的.dark h1, h2正在选择所有 h1类的子元素。 dark (正如我上面解释的那样)，和所有h2元素在你 body 的任何地方，句点......同样适用于.light . 您需要的是:

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

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

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