css - @media 特殊性中的 img 高度属性

Question

我有以下 CSS，但虽然图像在桌面分辨率上显示 @60px，但在 @media 导入下它不会调整为 40px。这是我缺少的与特异性有关的东西吗？：

@media (max-width: 976px) {
  #navigation .user .dropdown >a img {
  margin-left: 10px;
  height:40px;
 };
}

#navigation .user .dropdown>a img {
    margin-left: 10px;
    height:60px;
}

Answer 1

切换代码的​​顺序以使其工作：

#navigation .user .dropdown>a img {
    margin-left: 10px;
    height:60px;
}

@media (max-width: 976px) {
     #navigation .user .dropdown >a img {
         margin-left: 10px;
         height:40px;
     };
}

由于您没有用@media查询包装“常规”代码，因此它在两种情况下都会执行。对于较低宽度的显示，您基本上已经height:40px;跟随height:60px;- 它被覆盖了。

Answer 2

#navigation .user .dropdown >a img {不一样#navigation .user .dropdown>a img {。CSS 中的空格在某些浏览器中可能是个问题，因为它表示所有后代。查看您的.dropdown >a. 还要切换代码的​​顺序，如下所示：

#navigation .user .dropdown>a img {
  margin-left: 10px;
  height:60px;
}
@media (max-width: 976px) {
  #navigation .user .dropdown>a img {
    margin-left: 10px;
    height:40px;
  }
}