Html 如何在当前媒体查询之前正确覆盖为媒体查询定义的样式？

这是小型设备的标题：

这是CSS：

body{
    margin: 0; 
    padding: 0;
    background-color: #EEEEEE;
    color: #393939;
    font-family: 'Molengo','Verdana','Georgia','Times New Roman',serif;

}

a, a:visited {
    color: #F03366;
    text-decoration: none;
}
#div-header{
    height: 3.1em;
    background-color: #393939;
    box-shadow: 0 4px 4px #CCCCCC;
    padding: 10px ;
}

#div-header h1 {
    display: inline-block;
    float: left;
    font-size: 1.4em;
}

#div-header h1 a, #div-header h1 a:visited {
    color: #DDDDDD;
    font-weight: bold;
    text-decoration: none;
}

#div-header .links{
    text-align: right;
    margin-top: 4.5em;
}

#div-header .links li {
    display: inline-block;
}

#div-header .links li a {
    font-size: 1.3em;
}

这是较大屏幕的标题：

这是代码：

@media (min-width: 1200px) { 
    #div-header{
        height: 3.1em;
        background-color: #393939;
        box-shadow: 0 4px 4px #CCCCCC;
        padding: 10px 30px;
    }

    #div-header h1 {
        display: inline-block;
        float: left;
        font-size: 2em;
    }

    #div-header h1 a, #div-header h1 a:visited {
        color: #DDDDDD;
        font-weight: bold;
        text-decoration: none;
    }

    #div-header .links {
        display: inline-block;
        float: right;
        /*padding-top: 1em; */
        position: relative;
        margin: 0;
        text-align: left;
    }

    #div-header .links li {
        display: inline;
        padding: 0 7px;
    }

    #div-header .links li a {
        font-size: 1.3em;
    }
}

代码中最重要的部分，它在两者之间有所不同 pages，是用于.links类的页面

基本css

#div-header .links{
    text-align: right;
    margin-top: 4.5em;
}

大屏幕的css

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
}

现在，我使用媒体查询来进行响应式设计

您可以在此处找到代码：

@media (min-width: 1200px) { 
    #div-header{
        height: 3.1em;
        background-color: #393939;
        box-shadow: 0 4px 4px #CCCCCC;
        padding: 10px 30px;
    }

    #div-header h1 {
        display: inline-block;
        float: left;
        font-size: 2em;
    }

    #div-header h1 a, #div-header h1 a:visited {
        color: #DDDDDD;
        font-weight: bold;
        text-decoration: none;
    }

    #div-header .links {
        display: inline-block;
        float: right;
        /*padding-top: 1em; */
        position: relative;
        margin: 0;
        text-align: left;
    }

    #div-header .links li {
        display: inline;
        padding: 0 7px;
    }

    #div-header .links li a {
        font-size: 1.3em;
    }
}

第一个问题是大屏幕的css继承了基本css的一些属性，比如文本对齐和页边空白顶部

所以我用这种方式重写了样式：

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
    margin: 0;
    text-align: left;
}

但现在标题如下所示：

如果我添加这一行：

padding-top: 1em;

标题看起来很好，但是您知道重新编写代码的原因吗 即使我将其恢复为大屏幕的默认值，它也不起作用 屏幕

此外，是否有方法告诉媒体查询完全覆盖样式 是否在当前媒体查询之前的媒体查询中定义

我希望我能解释清楚。谢谢你的帮助

---

提前感谢。

您正在重置大屏幕CSS中的边距。把那条线拿出来，剩下的就行了

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
    text-align: left;
}

---

CSS的级联特性意味着您不能仅仅清除一组现有的样式，它们需要被覆盖。因此，您可以维护所需的样式，并覆盖这些样式以使页面响应。

我对您的代码进行了一些编辑，并对无用的定义进行了一些清理

我使用显示表格和表格单元格将li和h1居中

#div-header{
    display: table;
    width: 100%;
}
#div-header .links {
    display: table-cell;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

您可以在此处看到新代码：

---

如果删除边距：0；然后该类的css将在基本css:margin top:4.5em；中定义边距；。我这样做是为了将边距重置为默认值。有没有更好的方法来重新设定利润率？啊，我误解了你想要达到的目标。如果添加填充顶部显示正确的显示，则执行该操作。如上所述，CSS就是这样，你不能只清除一个样式定义，你需要覆盖它。或者，你也可以用不同的查询来限制特定的样式，而不是覆盖它。例如@media（最大宽度：1199px）选择最适合您的内容（如果适合您）。