css3 – 媒体查询样式不覆盖原始样式

前端之家收集整理的这篇文章主要介绍了css3 – 媒体查询样式不覆盖原始样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试对我正在建设的网站使用一些媒体查询。然而,我的问题是,当媒体查询样式实际上正在应用,它们正在被覆盖。我不能为我的生活告诉为什么,因为我使用相同的精确选择器。任何人都能指出我看不到的东西吗?

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;
    }
}
原文链接:https://www.f2er.com/css/220250.html

猜你在找的CSS相关文章