如何隐藏一个在页面上多个位置使用的类，*仅来自特定元素*，使用 css 媒体查询答案

【问题标题】：how to hide a class, that is used on several places on the page, *from a specific element only*, with css media query如何隐藏一个在页面上多个位置使用的类，*仅来自特定元素*，使用 css 媒体查询
【发布时间】：2021-10-21 19:07:53
【问题描述】：

我在页面的某些位置使用包装器，在较小的显示器上，我想停止使用它，但只在一个元素上。

.place {
  display: grid;
  grid-template-columns: minmax(340px, 460px) minmax(352px, 484px);
  
  
@media screen and (max-width: 754px) {
  .place {
   grid-template-columns: repeat(auto-fit, minmax(320px, 100vw));
   grid-gap: 25px
  }
  
  .place > .narrower {
    display: none;
  }
}

<section class="places narrower">
  <div class="place">
    <h2 class="place__title">Maine</h2>
    <div class="place__website">
      <h3 class="place__url-heading">url</h3>

我试过不显示。当然，它会对所有元素做出反应，将更窄的类放在 html 上。

那么我如何仅从位置 section.places 中删除 754px 的位置？

【问题讨论】：

除了某些特定元素之外，您想隐藏所有类较窄的元素吗？
我不太理解你的 CSS，因为更窄的部分似乎是一个类，之后是一个具有类位置的元素，而不是相反，
我只想在一定宽度的屏幕上删除使用更窄的地方

标签： css class media-queries responsive media

【解决方案1】：

如果您想隐藏除某些特定元素之外的所有元素，请尝试将您的 CSS 选择器与 ":not" 伪选择器结合使用。

@media screen and (max-width: 754px) {
  .place {
    grid-template-columns: repeat(auto-fit, minmax(320px, 100vw));
    grid-gap: 25px;
  }

  .place > .narrower:not(section.narrower) {
    display: none;
  }
}

【讨论】：