我有一个链接到CSS样式表的网页。我试图插入各种媒体查询规则，但第一个规则被应用，第二个（第三个，第四个...）没有。
此样式适用于：
@media screen and (max-width:1200px) {
.submenu {
grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}
}此样式不适用：
@media screen and (max-width:1200px) {
.submenu img {
width: 250px;
height: 180px;
}
}我已经：
1.在我的头上插入下面的代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">1.已尝试分离仅用于媒体查询的CSS文件。
1.尝试将两个规则放在同一个选择器下（因为选择器绝对相同！），如下所示：
@media screen and (max-width:1200px) {
.submenu {
grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}
.submenu img {
width: 250px;
height: 180px;
}
}我在用Edge。
有谁有线索吗？
1条答案
按热度按时间roqulrg31#
对于
.submenu img，规则可能被另一个css规则覆盖。使用开发工具检查元素，并在Computed属性中搜索图像的width或height，您可能会看到多个样式应用于它，最后一个可能是适用的样式。您也可以键入样式以查看它的定义位置。一种解决方法是将媒体查询规则标记为
!important，如下所示。如果不起作用，请共享您的html和css来检查问题。