css - 具有默认样式的媒体查询无法按预期工作

Question

这是我的代码:

@media (max-width: 480px) {
    .content {padding:4px;}
}   

@media (min-width:481px){
    .content {padding:10px;}
}

它工作正常。但是，当我像下面这样更改它时，它并没有像我预期的那样工作:

@media (max-width: 480px) {
    .content {padding:4px;}
}

.content {padding:10px;}

我打算将“.content {padding:10px}”设为默认样式。只有小于等于 480px 的屏幕宽度使用“.content {padding:4px}”。

Answer 1

在您的示例中使用默认样式 last ，它将覆盖已设置的所有内容。 CSS 从上到下处理，任何多次指定的属性都将采用最后指定的值。

因此，将默认样式放在前面。这样，如果 @media 查询匹配，它将覆盖已设置的默认样式 10px。

.content {padding:10px;}

@media (max-width: 480px) {
    .content {padding:4px;}
}