gpt4 book ai didi

javascript - 将 CSS 样式应用于基于祖先类的子项

转载 作者:行者123 更新时间:2023-11-28 18:46:12 25 4
gpt4 key购买 nike

好的 - 我有一个非常基本的页面,我正在努力保持尽可能简单。我有一个“主题选择器”,可以在浅色和深色主题之间进行选择,并根据它设置 body 的类别,基本上从白色/黑色背景/文本变化。我的盒子里面有不同的背景颜色,也需要改变......有没有办法根据 body 标签的类别(或与此相关的任何祖先)更改 child 的应用类别(可能很多被删除) ) 使用 CSS?

简单演示:

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

我知道我可以使用 js(我正在使用的是 d3)将一个类应用于所有子级,但我想尽可能多地使用 CSS...

最佳答案

您可以像标记中的任何其他标记一样,将祖先类的规则作为 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> 添加了类元素来指​​示用户代理支持哪些功能。

关于javascript - 将 CSS 样式应用于基于祖先类的子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10527568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com