我可以使用子选择器进行媒体查询吗？

Question

我在课堂上有一些媒体查询，他们的工作非常好，但Chrome浏览器错误地将其显示为唯一的浏览器。所以我使用浏览器黑客攻击其他类，但我不知道如何定位媒体查询。我在浏览器黑客中试过这个：

.firstclass > h1 > @media(min-width: 1620px) {
      font-size: 3.7vw;
}

但是我的代码编辑器说"media definitions require block statements after any features"，所以它似乎将它作为一个新的媒体查询......

如何正确定位？媒体查询不是该类的孩子吗？

Answer 1

@media (min-width: 1620px) {
  .firstclass > h1{
    font-size: 3.7vw;
  }
}

它的语法错误，希望它会有所帮助。

Answer 2

原始CSS不允许媒体查询包含在选择器中。媒体查询本身必须包含他们希望应用其他样式的选择器。

您的.first-class > h1声明必须在 @media查询块中包含：

@media ... {
  .first-class > h1 > ... {
    font-size: 3.7vw;
  }
}

您需要指定...在这里的内容。如果您希望定位h1元素中包含的任何内容，可以将通用选择器（*）用作.first-class > h1 > *。

媒体查询本身就是目标群体的选择者。选择器不针对媒体查询;根据您在此处的评论，我相信您误解了如何使用这些评论。