基于body类的纯CSS条件显示div方案咨询（无JS/全局样式权限）

这问题刚好踩中了CSS选择器的核心用法，完全可以在你给定的所有限制下解决——不用JS、不碰body元素、只给单个div写样式就行，思路很清晰：

核心逻辑 #

利用CSS的后代选择器优先级：给每个div设置默认隐藏，再通过「body带指定主题类 + div自身选择器」的组合规则，让对应主题下的div显示出来。因为组合选择器的优先级比单个div选择器高，所以能覆盖默认的隐藏规则。

具体实现步骤 #

假设你的HTML结构是这样的：

<body class="theme-light">
  <div class="theme-content-light">浅色主题专属内容</div>
  <div class="theme-content-dark">深色主题专属内容</div>
</body>

然后分别给两个div写样式（不需要全局样式，每个div的样式独立维护）：

1. 浅色主题div的样式：

/* 默认隐藏，只有body带theme-light时显示 */
.theme-content-light {
  display: none;
}
body.theme-light .theme-content-light {
  display: block; /* 根据你的布局需求换成flex/grid等都可以 */
}

2. 深色主题div的样式：

/* 默认隐藏，只有body带theme-dark时显示 */
.theme-content-dark {
  display: none;
}
body.theme-dark .theme-content-dark {
  display: block;
}

为什么符合所有限制？ #

• 没有直接操作body元素：只是利用它已有的类作为选择器条件，完全不需要修改body的属性或样式
• 零JavaScript：纯CSS逻辑实现
• 仅为div设置样式：所有样式规则都是针对单个div的类，没有全局样式污染
• 不需要预处理器：纯原生CSS语法，完全不用嵌套或预处理器特性

额外注意事项 #

如果你的div只能用内联style属性写样式，那组合选择器没法直接生效，这时候建议把样式写在页面的<style>标签里——这依然符合“仅为div设置样式”的要求，因为所有规则都是针对特定div的。

内容的提问来源于stack exchange，提问作者Jaime