CSS嵌套主题样式需求：子主题覆盖父主题文本颜色

核心思路是利用CSS自定义属性（变量）的继承特性，让.text元素自动继承最近父级主题类的颜色设置，完美解决嵌套场景的优先级问题。

实现代码 #

CSS

/* 默认样式：无主题时文本为黑色 */
.text {
  color: black;
}

/* style_a 主题：定义文本颜色变量 */
.style_a {
  --theme-text-color: red;
}
/* 让style_a下的所有.text使用该变量 */
.style_a .text {
  color: var(--theme-text-color);
}

/* style_b 主题：同理定义自己的颜色变量 */
.style_b {
  --theme-text-color: green;
}
.style_b .text {
  color: var(--theme-text-color);
}

HTML示例

<!-- 无主题，默认黑色 -->
<div class="text">BLACK</div>

<!-- style_a 层级下的文本 -->
<div class="style_a">
  <div class="text">RED</div>
  
  <!-- 嵌套style_b，最近父级是style_b，显示绿色 -->
  <div class="style_b">
    <div class="text">GREEN</div>
    
    <!-- 再次嵌套style_a，最近父级是style_a，显示红色 -->
    <div class="style_a">
      <div class="text">RED</div>
    </div>
  </div>
</div>

<!-- style_b 层级下的文本 -->
<div class="style_b">
  <div class="text">GREEN</div>
</div>

方案优势 #

• 就近匹配：CSS自定义属性会沿着DOM树继承，最近的主题类设置的变量会覆盖祖先的，完全符合需求。
• 独立拆分：style_a和style_b的代码可以分别放在独立的CSS文件中，互不干扰，满足主题文件独立的要求。
• 无特殊选择器：不需要使用!important、:not或复杂的嵌套选择器，避免了优先级冲突和代码冗余。

内容的提问来源于stack exchange，提问作者Klaus F.