2012-04-15 60 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像素(或任何你的斷點),所有懸停狀態都被禁用,你可以從那裏設置你想要的樣式。