CSS怪异行为

Question

我正在设计一个网站，有一些h3标题和段落，包装在一个名为“featured-info”的div类中。此外，我还有一个footer元素，它位于主体中的主包装器中。各段用斜体字写成：

.featured-info p {
    font-style: italic;
}

并且页脚有边框：

footer {
    border-top: 1px solid rgb(128, 128, 128);
}

页脚文本也是一个h4向上感知：

footer h4 {
    text-transform: uppercase;
}

主要的问题是我有一个设置:@media screen和（最小宽度:750px)，它使一些导航按钮内联，并调整一些文本的大小，但是...当页面大小小于750px时，页脚样式和斜体字体将消失。我不明白为什么。如果需要，我会提供更多的信息。THX！

乐：找到了。一个该死的分号。谢谢大家！没想到在这么短的时间内得到这么多回应。

现在我有了另一个问题

在该菜单下，当分辨率为最小750px时，我有一个h1标题，通常在中心

h1 {
    font-size: 2.4213em; /*3.3684em*/
    line-height: 1.2656em;
    margin-top: 0.4219em;
    margin-bottom: 0;
    color:  rgb(172, 140, 71);
    text-align: center;

}

问题是，当窗口从750px到950px时，它会向右移动。我有这些设置：

@media screen and (min-width: 750px){

    .main-navigation {
        min-height: 90px;
        border-bottom: 1px solid rgb(36,36,36);
        border-top: 1px solid rgb(36,36,36);
        /*overflow: hidden;  dubiosssss */
    }

    .main-navigation ul {
        max-width: 950px;
        margin: 0 auto;

    }

    .main-navigation li {
        float:left;
        margin-left: 20px;
        width: 20%;

    }

    .main-navigation a {
        background: none;
    }
}
 /* media query for 750*/
}
@media screen and (min-width: 950px){

    .main-navigation ul {
        position: relative;
        right: -15px;
    }

}

任何建议都将是伟大的，再次感谢！

Answer 1

@media参数中的min-width意味着您指定的大小和更大的大小中的任何大小都将获得您设置的样式。

听起来你有些风格放错了地方。通常在CSS中从小到大是更好的做法。这意味着首先指定全局样式（不会更改的样式），然后再以您的方式扩展到大视口。

您可能正在覆盖一些您想要保留的样式。