如何隱藏一個在頁面上多個位置使用的類，*僅來自特定元素*，使用 css 媒體查詢

Question

我在頁面的某些位置使用包裝器，在較小的顯示器上，我想停止使用它，但只在一個元素上使用。

 .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 的位置刪除它？

Answer 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;
  }
}