媒体未覆盖原始 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 冒泡是更好的方法。

媒体未覆盖原始 css

Media is not overriding the original css

css

media

overriding