媒体并没有压倒原来的CSS

Question

出于某种原因，我的@media不会覆盖我原来的CSS。它出现在我的检查员身上，但它已被越过了。我确保我的媒体覆盖在我的其他CSS下。

Css代码：

#content div div:nth-child(even) p{
margin-left: 40px;
}



@media (max-width:880px){

 #content div div p {
     margin-left: 0;
     margin: 0;
 }
 }

检查员的屏幕截图：Screenshot

Answer 1

这是因为顶部选择器比新的自定义选择器更具体。

尝试使用相同的选择器：

#content div div:nth-child(even) p{
    margin-left: 0;
}

或者，在社区中较少被接受，请使用！important：

#content div div p{
    margin-left: 0!important;
}

Answer 2

使用！important不是最佳方法，您应该在媒体查询中重新指定选择器：

#content div div:nth-child(even) p{
    margin-left: 40px;
}

@media (max-width:880px){
     #content div div:nth-child(even) p {
         margin-left: 0;
         margin: 0;
     }
 }

使用SASS和@media冒泡是一种更好的方法。