如何让CSS优先匹配DOM中最深层级的.card变体样式？

我有一个包含两个变体的.card组件，相关CSS与HTML代码如下：

.card {
  padding: 2rem;
  border: 2px solid black;
  &.is-dark {
    background: #151515;
    p {
      color: white;
    }
  }
  &.is-light {
    background: #fcfcfd;
    p {
      color: #111;
    }
  }
}

<div class="card is-light">
  <p>Some content</p>
  <div class="card is-dark">
    <p>Some sub-content</p>
  </div>
</div>
<hr />
<div class="card is-dark">
  <p>Some content</p>
  <div class="card is-light">
    <p>Some sub-content</p>
  </div>
</div>

当前问题：嵌套结构中的<p>元素会同时匹配.card.is-dark p和.card.is-light p选择器，由于后者定义在后，优先级更高。但我期望.card.is-light .card.is-dark p下的文本为白色，.card.is-dark .card.is-light p下的文本为深色。

我曾尝试以下写法，但无法满足需求（.is-dark嵌套.is-light时，生效的仍是is-dark样式）：

.card {
  &.is-dark {
    &, :not(.is-light) {
    }
  }
}

请问能否让CSS优先匹配DOM中最深层级的.card变体样式？

解决方案 #

方法1：精准匹配嵌套层级，提升选择器权重 #

通过编写更具体的嵌套选择器，让对应层级的样式拥有更高权重，覆盖通用规则：

.card {
  padding: 2rem;
  border: 2px solid black;
  
  &.is-dark {
    background: #151515;
    p {
      color: white;
    }
    /* 匹配is-dark内部的is-light卡片文本 */
    .card.is-light p {
      color: #111;
    }
  }
  
  &.is-light {
    background: #fcfcfd;
    p {
      color: #111;
    }
    /* 匹配is-light内部的is-dark卡片文本 */
    .card.is-dark p {
      color: white;
    }
  }
}

这种写法直接针对嵌套场景定义规则，权重高于通用的.card.is-* p，完全符合需求。

方法2：使用CSS变量（推荐） #

通过CSS变量的层级继承特性，让最深层的.card变体自动覆盖颜色变量，无需编写复杂嵌套选择器：

.card {
  padding: 2rem;
  border: 2px solid black;
  /* 定义默认颜色变量 */
  --card-bg: #fcfcfd;
  --text-color: #111;
  background: var(--card-bg);
  
  p {
    color: var(--text-color);
  }
  
  &.is-dark {
    --card-bg: #151515;
    --text-color: white;
  }
  
  &.is-light {
    --card-bg: #fcfcfd;
    --text-color: #111;
  }
}

CSS变量遵循DOM层级继承，最深层的.card设置的变量会覆盖上层值，嵌套的<p>会自动继承当前所在.card的颜色，代码简洁且易维护。

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