2012-04-15 34 views
2

如何删除媒体查询CSS文件中主要CSS文件中声明的样式条目?删除:悬停在媒体样式表上?

例如,我想删除a:hover条目以用于触控设备。

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

我怎样才能在media.css取消了呢?

+1

你不能删除CSS规则,你可以覆盖它们。因此,您可以将颜色和背景设置为media.css中的非徘徊值,或者包含'a:hover {color:#999999;背景:#111111;}'在特殊的desktop.css中,而不是在main.css中 – 2012-04-15 21:56:52

+0

什么是您的媒体查询? – BoltClock 2012-04-15 21:58:31

回答

7

您不能“删除”CSS规则。 级联不能这样工作。

只有这样,才能让你的规则只适用在媒体查询不满意是它在查询的否定版本隔离开来,无论是在你的main.css样式表内的@media块:

@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样式表中的样式,但缺点是,你必须知道什么值回落到。


除了在桌面浏览器的开发者工具,也许。

+0

谢谢,我会撤消风格。我只是认为在不写太多代码的情况下,有一种奇特的做法。 – Paul 2012-04-15 22:15:32

0

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

0

,我发现最好的办法是使用媒体查询来设置悬停状态摆在首位

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

使用“最小宽度”,让您在桌面上的悬停状态,但只要屏幕低于800像素(或任何你的断点),所有悬停状态都被禁用,你可以从那里设置你想要的样式。