在本机 css 中不显示优先于媒体特定 css

Question

我是新手，所以如果术语不太正确，请道歉。我正在构建一个具有 4 个样式表的网站：基本（桌面大小并考虑与媒体查询不兼容的旧浏览器）、移动纵向、移动横向、平板电脑。最后 3 个加载了媒体查询。

我有一些在 Base 中显示的 div 容器，但在较小设备的样式表中设置为“display:none”，这很好用。

但是我有一些在 Base 中设置为“display:none”，我想在较小的设备中显示，但是 Base 样式表中的“display:none”优先于样式表中的 css较小的设备。

有什么想法或建议吗？

Answer 1

所以我假设你在你的 html 中像这样引用你的 css：

<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="other.css">
<link rel="stylesheet" type="text/css" href="another.css">

在你的基础上：

#element {
 display: none;
}

在 another.css 中你有

#element {  display block; }

如果它们被这样引用，那么 another.css 中的 css 将覆盖 base 中的内容。

你可能有

body #element {
 display: none;
} 

在base.css中

并且拥有

#element {
 display: block
}

由于您的选择器在 base.css 中占主导地位，因此在 another.css 中不起作用。

如果所有其他方法都失败了，一个 hacky 方法是在 css 规则的末尾添加 !important，例如：

#element {
 display: block !important;
}

我不喜欢使用 !important，但如果您无法正确设置 css 选择器，这只是一个想法

这都是猜测工作，无需查看您的 css 和 html

Answer 2

在您的移动样式表中粘贴 display:block 或 display:block !important 如果它仍然拒绝。