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

Posted 2023-03-06

【中文标题】如何隐藏一个在页面上多个位置使用的类，*仅来自特定元素*，使用 css 媒体查询

【英文标题】：how to hide a class, that is used on several places on the page, *from a specific element only*, with css media query

【发布时间】：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，因为更窄的部分似乎是一个类，之后是一个具有类位置的元素，而不是相反，

我只想在一定宽度的屏幕上删除使用更窄的地方

【参考方案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;