CSS：DOM 优先级最深

Question

我有一个

.card

组件，有两个变体：

.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

情况下文本为白色.

我是否有机会告诉我的 CSS 优先匹配 DOM 中的最深？

我想到了

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

但它不起作用，因为它将适用于

is-dark

，而我期望

.is-light

（在

.is-light

内的

.is-dark

的情况下）。

谢谢

Answer 1

如果你限制你的CSS，使其只针对直接子元素，那么你的方法就有效。

显然这必须进行调整，具体取决于您的实际卡片 HTML 的外观，我认为这是它的简化版本。也许您可以使用额外的包装器来为 CSS 选择器指定卡片的内容。

.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>