Question

如何删除媒体查询CSS文件中主CSS文件中声明的样式条目？

例如，我想删除a：hover条目，以便在触摸设备上使用。

main.css：a:hover {color:#999999; background:#111111;}

如何在media.css中取消此功能？

Answer 1

你不能“删除”CSS规则。¹级联不能那样工作。

只有在不满足媒体查询时才能使规则应用的唯一方法是在查询的否定版本中将其隔离，或者在main.css样式表中的@media块中：< / p>

@media not [your media query] {
    a:hover {color:#999999; background:#111111;}
}

或者在页面头部的单独样式表中：

<link rel="stylesheet" media="all" href="main.css">
<link rel="stylesheet" media="[your media query]" href="media.css">

<!-- Or put this in a separate file and link to it as above -->
<style media="not [your media query]">
a:hover {color:#999999; background:#111111;}
</style>

或者你可以撤消media.css样式表中的样式，但缺点是你必须知道要回归的值。

¹ _{除了桌面浏览器的开发者工具之外，也许。}

Answer 2

您的选择是特异性或重要性。或者只是在主样式表后添加媒体查询样式表，如果它们具有相同的特异性。

Answer 3

我找到的最佳选择是使用媒体查询首先设置悬停状态

@media screen and (min-width: 800px){
  a:hover {color:#999999; background:#111111;}
}

使用“min-width”允许你在桌面上有悬停状态，但是一旦屏幕低于800px（或者你的断点是什么），所有悬停状态都被禁用，你可以准确地设置你想要的样式

删除：悬停在媒体样式表上？

3 个答案: