@media specificity中的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;
  }
}