Question

好的 - 我有一个非常基本的页面，我尽量保持简单。我有一个“主题选择器”，在明暗主题之间选择，并根据它设置身体的类，基本上从白/黑背景/文本改变。我在其中的盒子是不同的背景颜色，也需要改变...有没有办法根据身体标签的类（或任何祖先）改变孩子的应用类（可能很多被删除））使用CSS？

简单演示：

<body class="dark">
    <div class="container">
        <div class="differentBG">THIS IS THE BOX I WANT TO CHANGE!</div>
    </div>
</body>

我知道我可以使用js（d3就是我正在使用的）将类应用于所有的孩子，但我希望尽可能多地保留CSS ...

Answer 1

您可以像在标记中的任何其他标记一样，在body标记上建立祖先类的规则：

body.dark .differentBG {
  background: black;
  color: white;
}

当differentBG有一个“黑暗”类时，我们的<body>课程将仅应用黑色背景。

body.light .differentBG {
  background: white;
  color: black
}

当differentBG有一类“光明”时，我们的<body>课程会应用白色背景。

作为一个额外的琐事，许多开发人员使用这种技术来设置他们的“JavaScript禁用”样式：

body.nojs .dynamicElement {
  display: none;
}

然后在页面加载时使用JavaScript删除该类。 Modernizr也使用此方法，但它会向<html>元素添加类以指示用户代理支持的功能。