html - 将样式应用于 div 但不应用于 <strong> 子元素

Question

我怎样才能将样式应用于父级 div但不是 <strong> child 。我尝试了各种方式 :not选择器，但我的尝试都没有成功。

这是我想出来的

.total:not(strong) {
  color: gray;
}

<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>

我知道我可以将样式分别应用于这些样式，但我正在寻找 :not这样做的方式，这样我就可以在一条线上完成。

我也知道我可以给<strong>上课做.total:not(.strong-class)但为什么它不像我最初尝试的那样起作用？

Answer 1

:not规则指的是目标元素。你的规则.total:not(strong)被翻译为将样式 ( color: gray ) 应用于具有类 .total 的元素，这不是 strong节点(<strong> 标签)。自 .total节点是 div ，规则仍然适用。

将强者的颜色重置为初始颜色或选择不同的颜色:

.total {
  color: gray;
}

.total strong {
  color: initial;
}

<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>