介质过滤器CSS问题

我有以下的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不适用？

可以看到整个站点here。只要调整窗口的大小，以宽1024

来源

2013-09-30 adit

我看到了媒体选择块内没有'＃main.products .filter'规则。你确定你已经上传了正确的CSS文件吗？ – Phil

多数民众赞成显然相匹配（根据萤火虫）的规则是

@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规则之前加载，则后面的规则将适用。

在这里看到一个类似的问题：Why does the order of media queries matter in CSS?

来源

2013-09-30 03:45:17

尝试把重要的！

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

或改用此：

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

来源

2013-09-30 03:53:27 maikelsabido

介质过滤器CSS问题

回答

相关问题