如何为父div设置样式但排除<strong>子元素？:not选择器失效问题

哈哈，这个坑我刚学CSS的时候也踩过！咱们一步步拆解问题：

你的选择器其实没“排除子元素” #

你写的 .total:not(strong)，本质是在挑选所有带.total类、但本身不是<strong>标签的元素。而你的HTML里，.total都是<div>，所以这个选择器完全等价于直接写.total——根本没起到排除子元素的作用！

为啥<strong>也变灰了？ #

这是CSS继承性搞的鬼：当你给.total（也就是那个div）设置color: gray时，它里面的所有子元素（包括<strong>）都会默认继承这个颜色，除非子元素自己有更高优先级的样式覆盖。你的<strong>没有额外样式，自然跟着变灰了。

核心误区：:not()管不到后代元素 #

:not()是针对当前匹配的元素本身的筛选，不是用来排除它的子元素的。它没办法直接让父元素的样式“跳过”某个子元素生效。

想要实现需求的两种思路 #

如果想让div里的普通文本变灰，<strong>保持原样式，有两个简单方法：

• 给普通文本套个标签：

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

  然后写 CSS：.total span { color: gray; }
• 反向覆盖子元素样式：

  .total { color: gray; }
  .total strong { color: initial; /* 或者你想要的默认颜色，比如black */ }
  

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