css - 删除 a:hover 在媒体样式表上？

Question

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

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

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

如何在 media.css 中取消它？

Answer 1

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

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

@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;}
}

使用“最小宽度”允许您在桌面上设置悬停状态，但是一旦屏幕低于 800 像素（或任何您的断点），所有悬停状态都将被禁用，您可以从那里完全设置您想要的样式。