我正在尝试对我正在建设的网站使用一些媒体查询。然而,我的问题是,当媒体查询样式实际上正在应用,它们正在被覆盖。我不能为我的生活告诉为什么,因为我使用相同的精确选择器。任何人都能指出我看不到的东西吗?
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; } }