Question

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

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

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

我有一个“黑暗”＆amp; “浅色”部分分别使用深蓝色和浅蓝色背景，在页面上交替显示。

到目前为止，我一直使用每个作为类名称，作为我的内容的包装。即。

<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（正如我上面所解释的那样），和所有{ {1}}元素在你身体的任何地方，句号......同样适用于h2。 您需要的是：

.light

请注意，使用上面的原始代码，您输入的是.dark h1, .dark h2 { color: orange; } .light h1, .light h2 { color: dark-blue; }而不是colour。该规范使用美式英语，因此除非您使用预处理器将它们重命名为变量或其他内容，否则您需要修复它们。另请注意，您尚未向＆＃34;小-8＆＃34;添加结束color。班级名称。

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

1 个答案: