Html 媒体过滤器css问题

我有以下css：

@media screen and (max-width: 1024px) {
    .directory-container {
        width: 100%;
    }

    .directory-container .banner-description {
        width: 100%;
    }

    #main-site h1 {
        left: 20%; 
    }

    #insta-shop-grid .profile-user .user-bio {
         left: 20%; 
    }

    .banner-title {
        margin-top: -20px;
    }

    #main.products .filter {
        margin: 0px 0px 0px 0px;
    }
}

我已将屏幕大小调整为1024，并且正确应用了.banner标题。但是为什么不应用

main.products.filter

---

可以看到完整的站点。只需将窗口的宽度调整为1024。

显然匹配的规则（根据Firebug）是

你有一大堆不同的.css文件——这条规则在

3a76827\u part\u 6\u product-and-profile\u 11.css中。我不确定您希望应用的规则位于何处，但我敢打赌它位于在此之前加载的CSS文件中。原因如下：

要了解发生了什么，您需要了解@media查询是如何应用的。假设两个媒体查询之间的CSS规则相同，则最后一个媒体查询将被应用。因此，如果在
@媒体屏幕
规则之前加载了
@媒体屏幕和（最大宽度：1024px）
规则，则后一条规则将适用

请参见此处，了解类似的问题：
尝试放置！重要的

#main.products .filter {
    margin: 0 !important;
}

或者改用这个：

#insta-shop-filter .filter {
    margin: 0 !important;
}

我在媒体选择块中没有看到
#main.products.filter
规则。你确定你上传了正确的CSS文件吗？
#insta-shop-filter .filter {
    margin: 0 !important;
}