我正在尝试对我正在建设的网站使用一些媒体查询。然而，我的问题是，当媒体查询样式实际上正在应用，它们正在被覆盖。我不能为我的生活告诉为什么，因为我使用相同的精确选择器。任何人都能指出我看不到的东西吗？
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
Box-shadow: 0 4px 2px -2px gray;
}
媒体查询CSS
@media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
第二个媒体查询工作正常，我设置导航显示无。但是，当我尝试将#global-wrapper-inner的宽度设置为100％时，它不适用。我可以看到样式是“应用”，当我按F12并选择该元素。但是，样式本身被划掉，并且没有实际应用，它仍然具有85％的原始宽度。
解决方法
原始CSS中的选择器与媒体查询中的选择器具有相同的
specificity(第一个声明也面向相同的属性 – 宽度)，并且因为媒体查询规则集正在被覆盖，我将假设它出现在之前原始规则集。
第二个媒体查询选择器工作原理是因为它定位的是未在原始CSS中设置的属性，因此特异性不相关。
@media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
