Question

我有2个CSS文件，每个文件都对应一个主题-亮，暗。它们都有完全相同的选择器，只是不同的颜色/背景色等定义。我的想法是，我可以通过在包装器div中添加light-theme或dark-theme来设置深色或浅色主题的任何组件/模块的样式。但是，如果我没有明确添加此内容，则应应用主体中使用的任何主题类。但是，如果在主体处有一个主题，在组件包装器中有一个主题，则以包装器主题为准。

以这个例子为例：

<html>
<body class='light-theme'>
  <div class="component-wrapper dark-theme">
    <div class="navbar">
      <nav class="nav-item">Link 1</nav>
      <nav class="nav-item">Link 2</nav>
    </div>
  </div>
...
...
</body>
</html>

我的dark.css有

.dark-theme .navbar { background-color: black; }

我的light.css有

.light-theme .navbar { background-color: white; }

问题：我的想法是-由于navbar具有.dark-theme作为最接近的祖先，因此将按照dark-theme进行样式设置。不幸的是，发生的事情是-css文件的加载顺序（在我的情况下，light-theme的加载最后一次），并且由于选择器的强度相同，因此以light-theme为准。

我该如何解决？

Answer 1

如果您使用的不仅仅是单个CSS文件，我真的建议您添加一个Sass（Scss）文件。这将使您的代码更容易阅读，特别是在您有更大的项目时。 Sass还在代码中添加了一些非常有用的新命令。

如果您想尝试：This is how to use Sass

Answer 2

摆弄一堆之后，我想通了。在您的示例中，您使用了单引号而不是双引号。 class='light-theme'与class="light-theme"。

这是一个有效的版本：

.light-theme .navbar { background-color: white; color: black;}
.dark-theme .navbar { background-color: black; color: white;}

<html>
<body class="light-theme">
  <div class="component-wrapper dark-theme">
    <div class="navbar">
      <nav class="nav-item">Link 1</nav>
      <nav class="nav-item">Link 2</nav>
    </div>
  </div>
</body>
</html>

具有相同强度定义的更接近元素的CSS样式选择器的优先级

2 个答案: