时间戳

首页 > 解决方案 > 如何阻止移动 CSS 被主 CSS 覆盖

html - 如何阻止移动 CSS 被主 CSS 覆盖

问题描述

我的 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 规则的全部意义吗？

标签： htmlcssmobileresponsive-design

解决方案

检查您的 CSS 的位置。

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

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

推荐阅读