如何阻止移动 CSS 被主 CSS 覆盖答案

【问题标题】：How to stop mobile CSS from getting overridden by main CSS如何阻止移动 CSS 被主 CSS 覆盖
【发布时间】：2020-01-05 04:51:59
【问题描述】：

我的 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;
}

页脚文本在移动设备上被截断，所以我添加了以下行：

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

40px 高度规则被 30px 规则覆盖。它只适用于!important，所以我有点困惑。哪些 CSS 规则？如果发生冲突，特定媒体的查询不应该遵循自己的规则吗？这难道不是为不同的媒体类型设置单独的 CSS 规则的重点吗？

【问题讨论】：

嘿敲门，我认为你需要将你的主 css 放在移动 css 之后。
它们在一个 CSS 文件中（目前）。移动页脚规则位于文件顶部。
您可以将移动页脚规则放在文件底部吗？

标签： html css mobile responsive-design

【解决方案1】：

这不是媒体查询的工作方式。 CSS 仍然遵循与往常一样的特殊性规则。如果你写footer {...}，然后在这个语句之后的10行你又写footer { ... }，第二个页脚中的样式会覆盖前一行的样式。

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

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

【讨论】：

如果它回答了您的问题，您应该将其标记为已解决。

【解决方案2】：

检查 CSS 的位置。

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

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

【讨论】：

【解决方案3】：

我总是遵循 css calc 方法
问题是在您的页脚高度上发现的，因此您可以在 CSS 上使用 calc 方法来覆盖它，这很有用。

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

【讨论】：