主页 / coding / 问题 / 78565221
Accepted
James B.
Asked: 2024-06-02 08:42:51 +0800 CST

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

  • 772

假设有这个接口。我只想隐藏 bbbbbb 文本并保留 aaaaaa。我认为代码片段中看到的规则可以完成这项工作，但事实并非如此。我缺少什么？

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

css

1 个回答

  1. Best Answer

    您可以要求它不是使用以下语法隐藏.top-part的直接父级.our-guybbbbbbb

    .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 .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="other-part">
      <div class="our-guy">
        bbbbbbb
      </div>
    </div>
  </div>
</div>

    • 1

相关问题