为什么当我使用@media 时我的元素不显示？

Question

@media screen and (max-width: 600px){
  .artists, .shop, .releases, .dates, .row.stars {
     display: block;
  }
}

@media screen and (max-width: 992px){
  .topings {
     display: block;
  }
}

.topings {
   display: none;
}

我想要显示的是 .topings，它是一个 p class。

<p class="topings">ARTISTS   SHOP   RELEASES   DATES</p>

出于某种原因，显示 none 和阻止不起作用，也许我搞砸了什么？有人可以帮忙吗？

Answer 1

更改规则的顺序：

.topings {
   display: none;
} 

@media screen and (max-width: 600px){
  .artists, .shop, .releases, .dates, .row.stars {
     display: block;
  }
}

@media screen and (max-width: 992px){
  .topings {
     display: block;
  }
}

Answer 2

您的代码有两处错误。

@media 查询必须用大括号 {} 围绕其中的样式。 （在你最近的编辑中，你现在已经自己修复了这个问题，所以你可以忽略这一点。）
文档中后面的样式会覆盖前面的样式。因此，最具体的 @media 查询必须在文档中排在最后。目前，display: none; 应用于所有屏幕尺寸并在文档中排在最后，因此它将覆盖其他所有内容。

这里是更正后的完整代码：

.topings {
   display: none;
} 

@media screen and (max-width: 600px){
  .artists, .shop, .releases, .dates, .row.stars {
     display: block;
  }
}

@media screen and (max-width: 992px){
  .topings {
     display: block;
  }
}

为什么当我使用@media 时我的元素不显示？

Why does my element not show when I use @media?

html

css

media-queries