显示:无;在媒体查询中不起作用 [重复]

display: none; in media query not working [duplicate]

提问人:Yunes Ehsanpour 提问时间:10/26/2023 最后编辑:Yunes Ehsanpour 更新时间:10/26/2023 访问量:41

问:

.albums .next_album {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 50px;
    background: rgba( 255, 255, 255, 0.1 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 9.5px );
    -webkit-backdrop-filter: blur( 9.5px );
    border-radius: 5px;
    color: #aaaaaa;
    font-size: 1.3rem;
    cursor: pointer;
}

/* start media query */

@media only screen and (max-width: 992px) {
    
    .next_album {
        display: none;
    }

    .albums {
        flex-wrap: wrap;
    }

}
<div class="week_album">
  <h2>Album of the week</h2>
  <div class="albums">
      <div class="single_album">
          <div class="image_album">
              <img src="elm050120fobcover0004a-1585330301.jpg" alt="this is a album">
          </div>
          <h3>Dua Lipa</h3>
          <p>If it ain't me</p>
      </div>
      <div class="single_album">
          <div class="image_album">
              <img src="unnamed.jpg" alt="this is a album">
          </div>
          <h3>Erfan</h3>
          <p>Fargh Dareh</p>
      </div>
      <div class="single_album">
          <div class="image_album">
              <img src="0b66f3ccb36641d285b8e84d7619d5ed.png" alt="this is a album">
          </div>
          <h3>Poobon</h3>
          <p>Tigh</p>
      </div>
      <div class="single_album">
          <div class="image_album">
              <img src="halsey-attends-the-2022-bud-light-super-bowl-music-fest-at-crypto.com-arena-in-los-angeles-100222_5.jpg" alt="this is a album">
          </div>
          <h3>Halsey</h3>
          <p>New Americana</p>
      </div>
      <div class="single_album">
          <div class="image_album">
              <img src="Yas,_Iranian_rapper_live_in_2018_05_(cropped).jpg" alt="this is a album">
          </div>
          <h3>Yas</h3>
          <p>Beem</p>
      </div>
      <div class="next_album">
          <i class="fa-solid fa-chevron-right"></i>  
      </div>
  </div>
</div>

我有一个带有类“albums”和一些 div 元素的 div。其中一个有一个名为“next_album”的类,它有.我希望当窗口大小达到 992px 时将其完全删除。但是媒体查询不起作用。 Somebode可以帮我解决这个问题吗? 我快疯了。display: flex;display: none;

我需要补充一点,我在 next_album 之后放置了另一个 div 进行测试,我给了它一个 dsiplay:flex;和显示:无;在媒体查询部分,它奏效了!我的意思是它以 992px 或更小的宽度消失了。这是我存储库的添加器。

HTML CSS Web 媒体查询 响应式

评论

0赞 Phil 10/26/2023
看起来像一个特异性问题。尝试在媒体查询中使用以匹配外部规则.albums .next_album { display: none; }
0赞 Yunes Ehsanpour 10/26/2023
我读过,但没有。这不是我问题的答案。
0赞 Yunes Ehsanpour 10/26/2023
我不明白。这将如何发挥作用?我已经在我的媒体查询中这样做了。请解释更多@Phil
0赞 Phil 10/26/2023
“我已经在我的媒体查询中这样做了”......不,你没有。您的媒体查询只有 which .媒体查询对特异性没有影响.next_album.albums .next_album
0赞 Yunes Ehsanpour 10/26/2023
@Phil “媒体查询对特异性没有影响”。我尝试了你说的,它奏效了。我以前从未遇到过这样的问题。我不得不说我不知道 css 中的特殊性是什么意思。

答: 暂无答案