我正在尝试对正在建立的网站使用一些媒体查询。 但是,我遇到的问题是,实际上正在应用媒体查询样式时,它们却被覆盖了。 我无法告诉我原因,因为我使用的是相同的选择器。 谁能指出我没看到的东西?
原始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%。