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

Question

我是新手，如果术语不太正确，请道歉。我正在构建一个包含4个样式表的网站：Base（桌面大小，以及与媒体查询不兼容的旧版浏览器），移动肖像，移动横向，平板电脑。最后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;
}

并在另一个CSS中你有

#element {  display block; }

如果它们被引用，那么另一个css中的css将覆盖base中的内容。

你可能有

body #element {
 display: none;
} 

在base.css中

并且

#element {
 display: block
}

由于你的选择器在base.css中更占优势，所以

在另一个css中无效。

如果所有其他方法都失败了，那么hacky方式就是在css规则的最后添加！重要的是：

#element {
 display: block !important;
}

我不喜欢使用！重要但它只是一个想法，如果你不能让css选择器正确

这是所有猜测工作，而不是看你的CSS和HTML

Answer 2

粘贴显示：在您的移动样式表中阻止或显示：阻止！如果它仍然拒绝，则为重要。