代码之家 › 专栏 › 技术社区 › James B.

未包含在特定元素中的项的CSS规则

css

James B. · 技术社区 · 2 年前

假设这个接口。我只想隐藏bbbbbb文本并保留aaaa。我原以为代码片段中的规则可以完成任务,但事实并非如此。我缺少什么?

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

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

1 回复 | 直到 2 年前

smallpepperz 2 年前

你可以要求 .top-part 不是的直系父母 .our-guy 使用以下语法隐藏 bbbbbbb

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

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

您的代码不适用于它们,因为 bbbbbb 没有父元素,因此没有可匹配的内容 :not(.top-part) 。如果添加这样的元素,则选择器工作

.main wrapper.element.我们的家伙:不是(.top part>*){
显示:无;
}

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