Html 如何阻止移动CSS被主CSS覆盖

My CSS包含以下页脚代码：

footer
{
text-align:center;
font-size:small;
    /* Part 3/3 of Sticky Footer code */
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
overflow: hidden;
}

页脚文本在mobile上被截断，因此我添加了以下行：

@media only screen and (orientation: portrait) {
footer
{
height: 40px;
}
}

---

40px高度规则被30px规则覆盖。它只适用于

！重要信息

所以我有点困惑。哪些CSS规则？媒体特定的查询在发生冲突时不应该遵循自己的规则吗？这不是为不同媒体类型制定单独CSS规则的全部意义吗？

我总是遵循CSS计算方法
这个问题是在你的页脚高度上发现的，所以要覆盖这个问题，你可以在CSS上使用calc方法，这很有用

@media only screen and (orientation: portrait) {
footer{
    height: calc( 100% + 40px );
  }
}

---

检查CSS的位置

如果CSS类在一个文件中，请确保移动CSS类写在主CSS之后

如果它们位于多个文件中，则应在主CSS之后添加移动CSS

---

这不是mediaqueries的工作方式。CSS仍然像往常一样遵循相同的指定规则。如果你写

footer{…}

然后在这条语句后面写10行，你会再次写

footer{…}

，第二个页脚中的样式会覆盖上一行的样式

对于具有

@media

规则的样式也是如此，它们只是在特定的屏幕大小上进行评估。你不会说“这就是这个决议的样子”。否则，您将不得不编写大量重复的CSS。您可以覆盖样式，但也必须注意放置样式的顺序

---

您写道，移动页脚规则位于文件的顶部。如果要覆盖此设备的规则，则应将所有移动CSS移动到文件底部

嘿，敲打，我认为你需要把你的主要css放在移动css之后。它们在一个css文件中（现在）。移动页脚规则位于文件的顶部。能否将移动页脚规则放置在文件的底部？如果它回答了您的问题，则应将其标记为已解决。