Question

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

<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的{{1}}来显示第二个class中的第一个（＆＃39; theme-light＆＃39;或＆＃39;主题暗＆＃39;。）

我无法直接访问body元素，并且javascript被阻止。我只能单独设置body元素的样式，不能访问文档范围的样式。

我如何应用某种＆＃34;条件CSS＆＃34;直接到div元素，基于身体的类？ CSS预处理器不是一个选项，顺便说一句。

有关场景的更多详细信息：这是一个生成HTML文档并允许用户插入DIV类型元素的应用程序。样式部分既不允许javascript事件。我想基于HTML的主题（body class）以不同的样式呈现数据。

Answer 1

请注意，代码的Javascript部分仅用于演示此处的代码示例。我切换到了课程light和dark，因为使用id将限制为每页一个元素，因为id值必须是唯一的

＆＃13;

themeToggle.addEventListener('click', function() {
  document.querySelector('body').classList.toggle('theme-dark')
  document.querySelector('body').classList.toggle('theme-light')
})

＆＃13;

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

＆＃13;

<body class="theme-dark">
  <div class="light">The theme is light</div>
  <div class="dark">The theme is dark</div>
  <button type="button" id="themeToggle">
    Switch to 
    <span class="light">dark</span>
    <span class="dark">light</span>
  </button>
</body>

＆＃13;

如果你无法访问HTML并且必须坚持使用id，那就是你使用CSS的方式：

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

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

Answer 2

真的很简单，只需使用CSS的层次性，如下所示：

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

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

带有一些访问限制的条件CSS

2 个答案: