1

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

简单演示：

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

我知道我可以使用 js（我正在使用 d3）将一个类应用到所有的孩子，但我想尽可能多地保留在 CSS 中......

4

1 回答 1

1

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

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

只有当有一个“黑暗”类时，我们的differentBG类才会应用黑色背景。<body>

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

当有一个“光”类时，我们的differentBG类将应用白色背景。<body>

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

body.nojs .dynamicElement {
  display: none;
}

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

于 2012-05-10T04:38:22.710 回答