html - 将样式应用于div，但不应用于<strong>子级

如何将样式应用于父div而不应用于子对象<strong>。我已经尝试过各种: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)，但是为什么它不能像我最初尝试的那样工作？

最佳答案

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

关于html - 将样式应用于div，但不应用于<strong>子级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58625360/