0

我有以下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-title。但是为什么main.products .filter没有应用呢？

完整的网站可以在这里看到。只需将窗口大小调整为宽度 1024。

4

2 回答 2

0

试着把！important。

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

或改用它：

#insta-shop-filter .filter {
    margin: 0 !important;
}
于 2013-09-30T03:53:27.730 回答
0

显然匹配的规则（根据 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 中很重要？

于 2013-09-30T03:45:17.737 回答