CSS规则失效排查：如何仅隐藏.top-part外的.our-guy元素？

你希望隐藏文本为“bbbbbbb”的.our-guy元素，保留文本为“aaaaaa”的那个，但编写的CSS规则未生效，相关代码如下：

原HTML结构 #

<div class="main-wrapper">
  <div class="element">
    <div class="top-part">
      <div class="our-guy">
        aaaaaa
      </div>
    </div>
    <div class="our-guy">
      bbbbbbb
    </div>
  </div>
</div>

原CSS规则 #

.main-wrapper .element :not(.top-part) .our-guy {
  display: none;
}

问题原因 #

你的选择器存在两个逻辑错误：

• 空格导致的层级错误：.element :not(.top-part)中的空格表示匹配.element下所有后代元素中不属于.top-part的元素，但你要找的是.element的直接子元素.our-guy，而非后代元素下的.our-guy。
• 选择器逻辑偏差：:not(.top-part) .our-guy是在匹配“非.top-part元素的后代中的.our-guy”，但目标的“bbbbbbb”元素本身就是.our-guy，它是.element的直接子元素，不是某个非.top-part元素的后代，因此无法被匹配到。

修复方案 #

以下两种写法都可以实现需求：

方案一：精准匹配直接子元素 #

使用子选择器>结合:not，明确选中.element的直接子元素中，不是.top-part的.our-guy：

.main-wrapper .element > :not(.top-part).our-guy {
  display: none;
}

方案二：更简洁的直接匹配 #

因为.element下只有一个直接子元素是.our-guy（即文本为“bbbbbbb”的那个），另一个.our-guy嵌套在.top-part内，不是直接子元素，所以可以直接写：

.main-wrapper .element > .our-guy {
  display: none;
}

内容的提问来源于stack exchange，提问作者James B.