我有 2 个 css 文件，每个文件对应一个主题 - 浅色、深色。 它们都具有完全相同的选择器，只是颜色/背景颜色等定义不同。 这个想法是，我可以通过简单地在其包装器div 中添加light-theme或dark-theme来设置深色或浅色主题的任何组件/模块的样式。但是，如果我没有明确添加它，那么应该应用正文中使用的任何主题类。但是，如果 body 有一个主题，组件包装器有一个主题，那么包装器主题应该占上风。
举个例子：
<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有
.dark-theme .navbar { background-color: black; }
我的光.css有
.light-theme .navbar { background-color: white; }
问题： 我的想法是 - 由于导航栏将 .dark-theme 作为最接近的祖先，因此它会根据深色主题进行样式设置。 不幸的是，正在发生的事情是 - 加载 css 文件的顺序(在我的情况下，轻主题加载最后(，并且由于选择器强度相同，因此轻主题占上风。
我该如何解决这个问题？
在摆弄了一堆之后，我想通了。在您的示例中，您使用了单引号而不是双引号。class='light-theme'vsclass="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>