媒体过滤器 CSS 问题

Question

我有以下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。

Answer 1

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

@media="screen"
#main.products .filter {
    margin: 5px 30px;
}

你有一堆不同的.css文件 - 这个规则是3a76827_part_6_product-and-profile_11.css的。 我不确定您希望应用的规则位于何处，但我敢打赌它位于在此之前加载的 CSS 文件中。 原因如下：

若要了解发生了什么，需要了解如何应用@media查询。 鉴于两个媒体查询之间的 CSS 规则相同，则最后一个媒体查询将是应用的媒体查询。 因此，如果您的@media screen and (max-width: 1024px)规则在@media screen规则之前加载，则将应用后一条规则。

有关类似的问题，请参阅此处：为什么媒体查询的顺序在CSS中很重要？

Answer 2

试着把！important。

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

或改用这个：

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