Question

在我的应用程序中，我提供了一组用户可以选择的颜色主题。我还在创建文档页面，该页面是应用程序的一部分，并显示所有可能的主题。

我对嵌套主题有疑问：父主题在应用程序级别设置，子主题在文档页面中进行展示。在某些情况下，我无法正确应用子主题-至少这不是我期望的。

我并不一定要在这里寻求解决方案，只是想了解为什么要按原样应用样式。

这是简化的示例。假设我有3个主题可供用户选择。为了为整个应用程序应用主题颜色，我在主体级别使用javascript添加了相应的CSS类。那部分工作正常。我还有一个文档页面，我想显示所有3个主题-每个主题都带有几个方框。

HTML：

.page {
  display: none;
}

SCSS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page" id="one" name="one">
<h1>Page One</h1>
</div>

<div class="page" id="two" name="two">
<h1>Page Two</h1>
</div>

<div class="page" id="three" name="three">
<h1>Page Three</h1>
</div>
<input type="text" id="enter"  name="enter" value="one" />
<input type="button" value="Click here" onclick="test();">

在第一个块的情况下，父div中的“ theme-1”被“ theme-2”覆盖。其余两个带有“ theme-2”和“ theme-3”的块的样式都可以。

我希望在这里：

每个父主题都会覆盖每个块的子主题，因此一切都以“ theme-2”为样式
或者每个块都有自己的主题样式-“ theme-1”，“ theme-2”和“ theme-3”。

有人可以解释为什么这种样式的样式不符合预期吗？

完整的示例在这里：https://codepen.io/peter_zz/pen/yZLPPV

父元素上的CSS主题将覆盖子元素上的主题

0 个答案: