html - 将样式应用于 div 但不是子级

Question

标签： htmlcss

Answer 1

The :not rule refers to the target element. Your rule .total:not(strong) is translated to apply the styles (color: gray) to an element with class .total, which is not a strong node (the <strong> tag). Since the .total node is div, the rule still applies.

Reset the strong's color to initial or choose a different color:

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