有一些访问限制的条件CSS_Css

有一些访问限制的条件CSS

css

有一些访问限制的条件CSS,css,Css,我有一个包含以下内容的实现： <body class='theme-dark'> <div style=‘???’ id='light'>The theme is light</div> <div style=‘???’ id='dark'>The theme is dark</div> </body> 主题是轻主题是黑暗的我需要一个纯css解决方案来显示第二个div中的第一个，它基于body的类（'t

我有一个包含以下内容的实现：

<body class='theme-dark'>
   <div style=‘???’ id='light'>The theme is light</div>
   <div style=‘???’ id='dark'>The theme is dark</div>
</body>


主题是轻
主题是黑暗的

我需要一个纯css解决方案来显示第二个

div

中的第一个，它基于

body

的

类（'theme-light'或'theme-dark'）
我无法直接访问body
元素，javascript被阻止。我只能单独设置div
元素的样式，无法访问文档范围的样式
如何根据body的类将某种“条件CSS”直接应用于div
元素？顺便说一句，CSS预处理器不是一个选项
关于该场景的更多细节：这是一个生成HTML文档并允许用户插入DIV类型元素的应用程序。不允许使用样式节，也不允许使用javascript事件。我想根据HTML的主题（body类）以不同的样式呈现数据。
注意，代码的Javascript部分仅用于演示此处的代码示例。我切换到了类light
和dark
，因为使用id
将限制任何给定id的每页一个元素，因为id
值必须是唯一的

themeToggle.addEventListener（'click'，function（）{
document.querySelector（'body'）.classList.toggle（'theme-dark'））
document.querySelector（'body'）.classList.toggle（'theme-light'））
})
。主题为暗。亮{
显示：无；
}
.主题灯.深色{
显示：无；
}

主题是轻
主题是黑暗的
切换到
黑暗的
光
这非常简单，只需使用CSS的层次结构，如下所示：
.theme-dark #light {
    display: none;
}

.theme-light #dark {
    display: none;
}

我认为您所追求的是非常简单的：.x.y{}
。它将样式应用于任何具有“y”类且父级具有“x”类的元素。parent
不是这里的crrect术语，它是祖先
。如果您在样式表中所指的“纯CSS”，是什么阻止您编写适当的选择器？你只是不知道怎么写选择器吗？或者是否存在其他限制，例如，您是否事先不知道body类的名称？我不明白为什么这里需要直接访问body元素。限制是我不能syle body元素。我正在寻找一种方法，根据body的classnameCSS没有“父”选择器，将样式直接应用于div。你的问题模棱两可；您提到了解body元素类，所以我不想解释为什么您不能在选择器中使用它？请注意，OP使用的是id
，而不是class
属性，用于light
和dark
。我已经说明了这一点。如前所述，我无法设置body元素的样式解决方案不需要这些。阅读答案的第一句，老兄。正如前面提到的，我不能设计身体元素的样式。你没有设计身体元素的样式。body元素是选择器的一部分？@BenM请看？？？部分那是我可以放置样式的地方，而不是一个部分。你到底为什么要使用样式属性？为什么不添加一个样式标签来使用提供的选择器呢。这听起来像是XY问题。@BenM，这是因为应用程序删除了所有禁止的标记（如样式）